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.
- Name – Home
- Path – home
- Click Create
- On the Parameters screen, Click ok (We will create page with params later in this series)
- New blank page should be created.
Add a blank container with Header and Search component
- Click (+) Add component to add a new blank container.
- Keep the default layout.
- Select the container and let’s add some styling to it.
* { width: 100%; background-color: #0378D6; padding: 50px 0; }
- Select main section from the content section on the left
- 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; }
- Add a stylized text component to the container.
- Set the component properties to the following.
- Text – Search for services
- HTML tag – H2
- Add a Search Input component below the stylized text
- Add some styles to it.
- Click Save
- 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.