Create a service portal and its branding

Use the Branding Editor to give your portal its own look and feel. Service Portal is designed to allow customers to have control over the behavior of their portals. One of the main navigation controls for users is the header main menu. The menu options are determined by the assignment of a main menu to the portal, but the look and behavior of the menu is defined within the theme and associated header.

About this task

Role required: admin or sp_admin role.

Note: If you have experience with CSS and HTML you can configure these fields in the portal form directly as accessed through the portal UI. However, the Branding Editor provides a real-time theme preview.

The changes made in the Branding Editor are recorded in the portal record. Any changes made in the Branding Editor or to specific components of the portal (such as a widget or a page container) override any customizations made to the theme.


  1. Create the portal.
    1. Navigate to Service Portal > Service Portal Configuration > Branding Editor .
    2. Select the Service Portal from the drop-down list.
    3. Complete the following fields.
      Table 1. Quick Setup tab options
      Field Description
      Portal Title The name of your portal. Changing the name of the portal in the Branding Editor also changes the title on the portal form field in the platform UI.
      Logo The logo that appears in the header for your portal.
      Logo padding Where you want the logo to sit in location to the edge of the header. This information is stored in the CSS variables section on the portal form.
      Tag line & background Fields defined by the JSON schema in the Quick start config field on the portal record in the platform UI. The sample Service Portal adds Tag Line and Background to the Branding Editor using the following schema:
      	"tagline": {
      		"table" : "sp_instance",
      		"sys_id" : "34fe3d96cb20020000f8d856634c9cf4",
      		"field" : "title"
      	"hero_background": {
      		"table" : "sp_container",
      		"sys_id" : "be98a8d2cb20020000f8d856634c9c63",
      		"field" : "background_image"
      Tag line Introduce your users to a portal page with a tag line. This text is stored in an instance of the homepage search widget.
      Tag line color Select a color for the tag line.
      Homepage background color Add a color for your background. You can type in a color name, hex color, decimal (r,g,b), or select from the color palate.
      Background image Upload an image to appear in the background of your homepage. This image is stored in the container for the widget on your homepage.
      Note: For any colors on the theme tab, you can use the standard color name, hex code, decimal (RGB) code, or select the color from the color palate. All the color definitions are stored in the CSS variables field of the portal form. The theme preview updates in real time as you make changes.
      Table 2. Theme colors tab
      Field Description
      Navbar Use the fields in this section to customize the colors for the header menu.
      Brand Use the fields in this section to customize the page colors. For example, the page background or the widget background.
      Text Use the fields in this section to customize the color of the text on a page.
  2. Add a header or footer to a service portal.
    1. Navigate to the portal theme (Service Portal > Service Portal Configuration > Portal Tables > Themes) then click the theme you want to add the header or footer to.
    2. In the header or footer field, select the header or footer you want to use for your portal.
      If you are just getting started, you can reuse the out of box Stock Header or Sample Footer widgets.
    3. Select Fixed Header or Fixed Footer to lock the header or footer in one place so when users scroll up or down they remain in the same location on the page.
    4. To configure the appearance of the header, in the Service Portal configuration page, open the Branding Editor. Under the Theme Colors tab, use the color selectors in the Navbar section to control the colors in the header.
  3. Create a portal homepage.
    The home page contains the major information and actions that your users see. When a portal is referenced by the URL suffix it lands on a home page. This homepage is often labeled index in website language.
    1. From any page in the Service Portal Designer, click Edit Portal Properties.
      Figure 1. Edit Portal Properties
      Top of Designer page with Edit Portal Properties button highlighted
    2. From the Homepage list, select the page you want for your portal homepage and click Save.
      Figure 2. Select a homepage
      Portal properties window with Homepage list highlighted
  4. Configure the service portal header menu.
    The header menu in a portal is actually comprised of two separate widgets: a header widget, which determines the style of the header, and the menu widget, which determines the actual items that appear in the header. You need to configure both before a header menu can appear and act like a header menu in your portal.
    1. In the Service Portal configuration page (Service Portal > Service Portal Configuration), navigate to Portal Tables > Instance with Menu, then click New.
    2. Complete the fields in the menu form.
      Figure 3. Menu form
      New instance with menu form, completed as a new menu for the documentation portal
      Table 3. Menu fields
      Field Description
      Title Name of the header menu. You need to know this when you associate the menu with your portal.
      Additional options, JSON format Advanced configuration options. For example, use this field to enable the shopping cart in the header menu with the following code:
      	"enable_cart": {
      		"displayValue": "true",
      		"value": true
      Application The record scope. The header menu record and the source table must have the same application scope.
      Widget The widget that the header menu is based on. Select a menu-type widget from the list. For example, the header menu widget that is included as an out-of-box widget.
    3. Save the form then click Menu Items from the related lists.
    4. Click New and complete the menu item form.
      Table 4. Menu item fields
      Field Description
      Label Name that appears for the item in the menu
      Parent menu This field should already contain the name of the menu you are adding items to. You can change the value as needed to other menus
      Parent menu item Use this field to nest menu items within other menu items
      Order Value that determines where the item appears in the menu in relation to other menu items
      Type The kind of page the item links to. For example, you can link to another page in the portal, or an external URL. Form fields vary depending on the option you select from this list. Select Scripted list for more advanced options.
      Page Name of the portal page the item links to. This option is available if you select Page as the menu item type.
      Condition Determines what conditions are required for menu items to show in the header. For example, the condition gs.hasRole("sp_admin") restricts access to menu items to users with the sp_admin role. Hide a menu item by setting this value to false. For more information on what conditions to use in the Condition field, see Restricting UI actions based on conditions in Create a UI action .
      Glyph Icon that appears beside the menu item
  5. After you create a menu and menu items, add the menu to a portal.
    1. Navigate to Service Portal > Portals, then open the portal you want to add a menu to.
    2. From the main menu field, click the reference lookup icon, then select the appropriate menu by name. Click Save.
      Figure 4. Select a menu
      Portal form with Documentation menu selected in the Main Menu field