Portal components allow for the creation of content templates for use in one or more portals or express portals. They function very similarly to Deliver components, but note that Deliver components and portal components are not interchangeable.

💡 Getting Started with Portals: Why Components?

If you’re just getting started with portals, components can be a major help. The sooner you get them set up, the greater the benefit you’ll see from using them! This article may seem a bit intimidating, but it’s well worth diving into even if you aren’t well-versed in portals or liquid markup.

What’s so cool about components?

Using components in a portal

To use components you’ve created in a portal:

1. From the main navigation, click Database.

2. Click Portals.

3. Select an existing portal or 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.

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, creating components requires a familiarity with the fundamentals of Liquid Markup.

Creating New Components: Creating a 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. Click Portals.

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

4. Click 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. Click Save. The component editor window appears. 

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

 Step 2: Create variables in the source editor

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

Then click 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. Click 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. 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 4: 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

     

3. Click 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. 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
     

3. Click Save.

Step 6: Preview the component

With all three variables in place, we can now click 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!