Part 4: Add homepage

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 home page

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

1. Name – Home
2. Path – home
3. Click Create
4. On the Parameters screen, Click ok (We will create page with params later in this series)
5. New blank page should be created.

Add a blank container with Header and Search component

1. Click (+) Add component to add a new blank container.
2. Keep the default layout.
3. Select the container and let’s add some styling to it.

* {
    width: 100%;
    background-color: #0378D6;
    padding: 50px 0; 
}

1. Select main section from the content section on the left
2. Make sure the style is set to following. This will keep all the content in the center.

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

1. Add a stylized text component to the container.
2. Set the component properties to the following.
   1. Text – Search for services
   2. HTML tag – H2
3. Add a Search Input component below the stylized text
4. Add some styles to it.
5. Click Save
6. Now when you navigate and login, it should redirect you to the homepage we just created.

Open https://<instance-name>.service-now.com/now/panda_tech

* {
    width: 600px;
}

Great!! We have successfully created a home page and linked it to the experience.