Part 2: Create your first page using UI Builder

Navigate to UI Builder

• Navigate to Now Experience Framework > Experiences.
• Open the Experience for Panda Tech.
• On the right side of the form, Besides the Admin panel, Click on the (i) Icon to open the Admin panel.
• Click Open UI Builder.

Alternatively,

• Navigate to Now Experience Framework > UI Builder.
• From My experience, Click Panda Tech

Create your first page

• Click on Create a page.
• Fill in the fields, as appropriate.

1. Name – Login
2. Path – login
3. Click Create
4. On the Parameters screen, Click ok (We will create page with params later in this series)

Add Container to your page

1. Click on the (+) to add your first component
2. In search box, type Container and select.
3. From the properties window, click on Layout
4. Select layout with 8fr 4fr (This will be 2 column layout with 1 column occupying 8 of the grids and other one with 4 grids).
5. End result should be something like this.

Add banner text and tagline to the left side of the layout for the login page

1. Click (+) to add the component on the left side of the container which is called main by default.
2. In search box, type stylized text and select.
3. Select the component we just drag and Make sure the properties are listed for the selected component.
4. Set the text as Welcome to Panda Tech.
5. While stylized text component selected, add one more stylized text in the bottom.
6. In the component properties,
   • Set the text as Where Pandas meet technology.
   • Select HTML tag property as Span.
   • Goto Style and copy following snippet.

* {
    font-size: 20px;
}

1. Let’s keep this text and all other content we add in the future, in the center. In order to do that, click main from the component structure on the left and select center in Align items property.
2. End result should be something like this

Add banner image to the main side of the layout for the login page

1. Let’s add a simple image for Panda Tech in db_image.
2. Navigate to Images from the platform view.
3. Click New.
4. Fill in the fields, as appropriate.
   • Active – true
   • Category – Content management
   • Name – panda_tech_login.png
   • Upload following image. (Image on the bottom with just Panda)
5. From the UI Builder, select the stylized component we added and click (+) on the bottom to add the component after.
6. In search box, type image and select.
7. Default image should popup.
8. From the properties,
   • Image source: /panda_tech_login.png
   • Fit – Expand to fill
   • Position – Center
9. Click Save.
10. End result should be something like this.

Add a login header text to the sidebar of the layout

1. With sidebar selected, In the component properties, select CSS styles and add following snippet.

* {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
    justify-content: center; 
}

1. With sidebar selected, click (+) to add component.
2. In search box, type stylized text and select.
3. In the component properties,
   • Text – Login to proceed
   • HTML Tag – Span
   • Style

* {
    font-size: 36px;
    padding: 30px;
    font-weight: 600; 
}

Add a login component to the sidebar of the layout

1. With Stylized text selected from the last step, Click (+) to add component after.
2. In search box, type login and select.
3. Click Save.
4. End result should be something like this

Great!! We have created our very first page for the Portal Panda Tech.