Portal component
AI-generated summary
Genesys Cloud Portal component enables embedding script pages into scripts through a straightforward configuration process accessible via Menu > Digital and Telephony > Interaction Assets > Scripts, where users select the Page component from the Component toolbar. The component supports two embedding modes: selecting a specific Page or selecting a Variable containing the page ID.
The Portal component provides comprehensive layout property controls for sizing and positioning. Width and Height properties offer three configuration options: auto-sizing (shrinks or grows with content), stretch (consumes maximum available space with weight-based proportional allocation), or fixed pixel dimensions. When multiple components use stretch mode, weight values determine space distribution—for example, a component weighted at 200 occupies twice the space of a component weighted at 100. Alignment properties position components left, right, or center relative to parent containers, with the constraint that vertical center alignment requires the parent container's Height to be set to Stretch or a fixed pixel value rather than Auto Sizing. Margin properties control spacing on all four sides (left, right, top, bottom) around component borders, with individual spin controls and a Set All option for uniform margin application.
Visibility control is managed through the Visible property, which operates via Boolean variables or expressions. Users can configure visibility by selecting the Layout property group and choosing either a variable-based approach (using Yes/No variables that show components when True and hide them when False) or an expression-based approach (entering True/False expressions in the Insert Variable field). At runtime, components display or hide based on the evaluated state of the assigned variable or expression. The documentation includes feedback mechanisms for users to report accuracy issues, outdated content, or clarity concerns, with suggested related articles covering scripting, script components, and knowledge portal configuration features.
The Portal component embeds a script page into a script. To embed a script page into a script, follow these steps:
- Click Menu > Digital and Telephony > Interaction Assets > Scripts.
- Create a script or open an existing one.
- From the Component toolbar, click Page
- In the Properties panel, expand the Common group.
- Use the Page menu to select a Page or Variable to embed into your script.Note: If you select Page, select a page for your script. If you select Variable, select the variable that contains the ID of your page. For more information, see Page variables.
- Set other properties for the component.
Layout properties
Configures width to a fixed size, to grow as needed to display content, or to consume as much space as possible relative to other components, using weighting to influence size adjustments.
- Auto-sizing configures the component to shrink or grow in accordance with its contents. For example, the width of a label can grow depending up on how much text it contains.
- Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.Note: If two components are both set to stretch, they are both allocated 50% of the remaining space by default. This proportion can be adjusted by changing the weight value. For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.
- px sets a fixed size in pixels. You can type an integer value into the box, or use up or down arrows to increment or decrement size. These arrows are visible when the component has focus.
Configures height to a fixed size, to grow as needed to display content, or to consume as much space as possible relative to other components, using weighting to influence size adjustments.
- Auto-sizing configures the component to shrink or grow in accordance with its contents. For example, the width of a label can grow depending up on how much text it contains.
- Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.Note: If two components are both set to stretch, they are both allocated 50% of the remaining space by default. This proportion can be adjusted by changing the weight value. For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.
- px sets a fixed size in pixels. You can type an integer value into the box, or use up or down arrows to increment or decrement size. These arrows are visible when the component has focus.
Aligns a component to the left, right, or center, relative to its parent container.
Tip: A component cannot be vertically aligned to center if the Height setting of its parent container is
Auto Sizing. To correct this, set the parent container's Height to Stretch or to a fixed height in Pixels.Margins set left, right, top, and bottom spacing around a border.
- Click the value field for a margin. A spin control appears in that field.
- Use the spin control to increase or decrease the margin.
- To update all margin values at once, click the Set All button for Margin in the properties panel.
The Visible property sets the visibility of a component based on the value of a Boolean (True or False) variable or an expression.
To set the Visible property based on a variable:
- Click the Layout property group in the Properties panel.
- Under Visible, click Select Variable.
- Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
- At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.
To set the Visible property based on an expression:
- Click the Layout property group in the Properties panel.
- Under Visible, select True/False Expression.
- In the Insert Variable box, enter an expression .
At runtime, the component is visible when the expression is True. The component is hidden when the expression is False.
[NEXT] Was this article helpful?
Get user feedback about articles.