1. Slate Knowledge Base
  2. Admissions & Enrollment
  3. Portals
  4. Portal Ingredients

Portal Components

Updated
Expand-All  Collapse-All

  Summit 2023 Feature

Portal components extend the templating capabilities of Deliver components to portals, including express portals.

How they work:

  1. Create programmable content blocks called components.
  2. In each component, add HTML and variables. Variables are Liquid markup elements that offer a list of styling options.
  3. Arrange those components, along with additional HTML, in portals.

Component variable options example.png

An example of a portal component. The end user assembling the portal has a choice of font and background color, but cannot otherwise edit the component.

 

Components

  Components enable users to choose styling options from a list you provide. For example, a header can be designed to offer a selection of one of two colors.

  Components can be locked to prevent editing by other users.

  Components can be previewed to ensure that the element renders as desired. 

  Components can be reused to prevent wasted time on duplicate work. 

Selecting a portal component.png

 

Variables

Components are shells that include HTML and configurable elements called variables.

There are four variable types:

    • Text (String): A free text element
    • Number (integer): A whole number
    • True/False (Boolean): A yes/no value stored as a "1" or "0"
    • Select (List): A single-value list of prompts

Variables are controlled by Liquid markup. As such, working with components requires a familiarity with the fundamentals of Liquid markup.

 

Component example: Creating a header

In this example, we'll create a sample header with three styling options that the user can configure:

    • Background color
    • Font
    • Text alignment

 

Step one: Create a new component.

  1. From the main navigation, select Database.
  2. Click Portals.
  3. On the right side of the page, select Components.
  4. Click New Component. A pop-up appears.

Navigating to the Components page.png

  1. Enter the following configurations:
    • Name: Enter a unique, descriptive name.
    • Description: Enter a description if desired.
    • Status: Active
    • Folder: Keep components organized in a clear folder structure. Select Other to create a new folder.
  2. Click Save. The component editor window appears. 
  3. Follow along with the following example by clicking Edit Component. 

Component_Configurations.png

 

Step two: Create variables in the source editor.

Click the Source button in the WYSIWYG editor. Paste the following line of HTML between the <body> tags:

 <div style="background: {{background}}; font-family: {{fontface}}; text-align: center; color: white; padding: 25px;">
{{header}}
</div>

 

The HTML contains merge fields for background, fontface, and header. These elements will be populated by creating corresponding variables.

Pasting_HTML_between_Body_tags.png

 

Step three: Configure the background color variable.

First, let's create the variable for background color using the Liquid markup variable background.

  1. Click OK to close the Source window.
  2. Click New Variable at right. A pop-up appears.
  3. Configure the following settings:
    • Name: Background Color
    • Liquid markup variable: background
    • Description: Enter an optional description.
    • Required: Select the checkbox
    • Type: Select (List)
    • Prompts: Similar to overriding system prompts on a form, we will add a display name, followed by a caret ^, and then the hex code for the desired background colors:
      • Blue^#00669e
      • Green^#99cc00
    • Default value: Blue.

    Configure_Background_Color_Variable.png

  4. Click Save. The new variable Background Color appears in the list at right.

 

  Tip

When using colors, HTML color names can be used along with RGB hex colors.

 

Step four: Configure the font variable.

The second variable we will add is for the font:

  1. Click New Variable from the navigation at right. A pop-up appears.
  2. Configure the following settings:
    • Name: Font Face
    • Liquid markup variable: fontface
    • Description: Enter an optional description.
    • Required: Select the checkbox
    • Type: Select (List)
    • Prompts: In this case, we do not need to override the prompt values since the font name is the same as the desired value.
      • Arial
      • Times New Roman
    • Default value: Arial

    Configure_font_face_variable.png

  3. Click Save. The new variable Font Face appears in the list at right.

 

Step five: Configure the default header text variable.

Finally, we will add the default text for the header:

  1. Once more, with feeling, click New Variable from the navigation at right. A pop-up appears.
  2. Configure the following settings:
    • Name: Header
    • Liquid markup variable: header
    • Description: Enter an optional description.
    • Required: Select the checkbox
    • Type: Text (String)
    • Default value: Slate University

    Configure_header_variable.png

  3. Click Save.

 

Step six: Preview the component.

With all three variables in place, we can now click View Preview to display the variables in action:

View_Preview.png

From here, create additional components as needed. With those, we'll be ready to quickly build a portal.

 

Adding components to a portal

To add components to a portal:

  1. From the main navigation, click Database.
  2. Click Portals.
  3. Select an existing portal. Click New Portal to create a new one.
  4. Create a new view, or select an existing one.
  5. From the palette at right, select Component. Drag the component into place where you want it, or double click to insert at the bottom. A Configure Component pop-up appears.
  6. Adjust the component's configurable variables, if any.
  7. Click Save.

Component variable options example.png