Portal components let you create content templates for portals and express portals:

• 🖌️ Components let the users creating a portal choose styling options from a list you provide.

• 🔒 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.

For example, you might create a header component that offers users a selection of one of two brand-standard colors. This gives users some control over how the portal looks, without handing over the branding reins completely.

How components work

1. Set up a component with HTML and variables. Variables are Liquid Markup elements that offer a list of styling options. For example, you can create a background color variable with color options from among your brand standard.

2. The Slate users that build portals can arrange the components and select from among the variable options you provide. Your portals are configurable, but still adhere to a unified look and feel.

Here’s an example: the Slate user assembling the portal has a choice of font and background color, but cannot otherwise edit the component.

📝 Portal components are similar to, but not interchangeable with, Deliver components.

Variables

Components are shells that include HTML and configurable elements called variables. Variables are controlled by Liquid markup.

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

Using components in a portal

To use components in a portal:

1. From the main navigation, select Database.

2. Select Portals.

3. Select an existing portal, or select 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. A Configure Component pop-up appears.
   

6. Adjust the component's configurable variables, if any.

7. Select Save.

Example: Creating a configurable header

The steps for creating new portal components are best explained in context. In this example, we'll create a sample header with three styling options that the user can configure:

• Background color

• Font

• Text alignment

Step 1: Create a new component

1. From the main navigation, select Database.

2. Select Portals.

3. On the right side of the page, select Components.

4. Select New Component. A pop-up appears.

   

5. 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.

6. Select Save. The component editor window appears.

7. Follow along with the following example by selecting Edit Component.

   

Step 2: Create variables in the source editor

Select the Source button in the WYSIWYG editor. Paste the following line of HTML between the 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.

Select OK to close the Source window.

Step 3: Configure the background color variable

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

1. Select New Variable at right. A pop-up appears.

2. 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.

     

3. Select Save. The new variable Background Color appears in the list at right.

💡 You can use HTML color names or RGB hex colors.

Step 4: Configure the font variable

The second variable we will add is for the font:

1. Select 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

     

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

Step 5: Configure the default header text variable

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

1. Select 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
     

3. Select Save.

Step 6: Preview the component

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

From here, create additional components as needed. With those, you and your staff will be ready to quickly build a portal in line with your institution’s brand.