Page builder components

Familiarize yourself with the Page Builder and its components to enable you to create action pages. The different components and sections of the page builder are described in the following sections. You add and customize extra fields and buttons depending on your own requirements.

The following screenshot shows the page builder:

  • Components are in the left pane.
  • Builder canvas in the middle section.
  • Page Details and component Properties and Actions are in the right pane.

Full view of page builder

Page templates

When creating a page, you can select from the following basic page layouts depending on the information you want. Each template is intended only to speed up your activity to produce the page you want.

  • Detail - Page template that provides static details.
  • Form - Create a page that provides static details in addition to the ability to input user data into your page.
  • Table - Create a page based on the data tables loading from your target application integration.
  • Static content - Set up page components that provide static, non-actionable, information such as headlines, error messages, reminders.

Page builder components

The Page Builder lets you choose from various page components that let you customize and configure your microapp output, information, and display. Use components to build a page microapp based on your expectations and needs. For example, if you want to show a list of users, you use the Table component to build it. The different template pages have different component features available by default. The following lists cover all available options that are available.

Input components

Input section provides components that create actionable sections on your page including buttons, text input, radio buttons and so on.

Detail view of input components

  • Button - Add a clickable component on the page with actions and logic. Button size and style can be adjusted. There are actions as options to Run Service Action, Go to URL, and Run Notification Trigger. For example, using actions the button can direct users to another page or submit an entry. For an example of this component in use, see Build a create page.
  • Text Input - Define text source by specifying the data table, column, and value that a user can load to the page. Component can be marked as optional. Field width can be modified. Validation rules can be configured based on a minimum or maximum length or text pattern to identify user input. For an example of this component in use, see Build a create page and Build a list page.
  • Text Area - Define text source by specifying the data table, column, and value that a user can load to the page. Component can be marked as optional. Validation rules can be configured based on a minimum or maximum length or text pattern to identify user input.
  • Num. Input - Define number source by specifying the data table, column, and value that a user can load to the page. You can define the format such as time, date, etc. Component can be marked as optional and field width can be modified. Validation rules can be configured based on a minimum or maximum length or text pattern to identify user input. Precision defines the number of total digits. Scale defines the number of digits to the right of the decimal point.
  • Select - Allows users to choose from a set list of values (limit is 100 values). Populated by data from the source system or you can enter the list of values manually. Component can be marked as optional and field width can be modified. You can define the format such as time, date, etc, as well as the field width. For an example of this component in use, see Build a create page.
  • Lookup - Allows users to search though a large quantity of values and allows users to select a value by searching for something else. Specification of where the data is being pooled from must be made as well as what the lookup value should be. Component can be marked as optional. For an example of this component in use, see Build a create page.
  • Checkbox - Add a selectable component on the page by defining source (data table and column), and default (either selected or disabled). Component can be marked as optional.
  • Radio - Add a set of options where only one can be selected. Populated by data from the source system or you can enter the list of values manually. Component can be marked as optional.
  • Date/Time - Define date and time to display in the microapp, default time (the time displayed before selection) to load to the page. Component can be marked as optional and field width can be modified.

Display components

Display section provides components that deliver information to your end users of microapps including tables, static text, and images and so on.

Detail view of display components

  • Table - Add a table by defining table source, filters, and defining columns. Page link actions can be added which direct the user to another page. Alignment can be modified. Personalized queries must be set to limit data exposure. A table without a personalized query exposes all records that match a table filter regardless of the data relation to subscribers. Your potentially sensitive data may be exposed to all microapp users unless you limit data exposure. Control data access for pages using the Personalize feature. Select the table in the component builder pane. Select Table Properties and then PERSONALIZE. Select +Add Condition and add the constraints as required. For an example of this component in use, see Build a detail page.
  • Text - Define text source from tables and formatting to load to the page. Data Source, Table, Column are all selected for the text to populate. A text format such as time, date, etc. can be given or conditional one based on parameters. You can add actions to go to a Page, URL, Send Email, or Call Phone. For an example of this component in use, see Build a detail page.
  • Static Text - Define static text to appear the page. Actions can be added. Alignment can be modified. You can make a distinction if the text is a header. Font style of bold and italics are available. Font size can be changed from Normal, Light, Small, and Small Light. You can add actions to go to a Page, URL, Send Email, or Call Phone. For an example of this component in use, see Build a create page and Build a detail page.
  • Static Image - Reference and display a static image from a predefined URL source. Image size and alignment can be specified. No actions can be added.
  • Image - Define image source (data table and column) and formatting to display on the page. Text can be added to be displayed if image cannot load. Image formatting such as alignment, size, and shape can be configured.
  • Line Divider - Use the divider to separate unrelated and group related information. No properties can be modified.
  • Back Button - Allows users to go back to previous page. A variable must be specified, that is data table, data column, and format. A label can be given. For an example of this component in use, see Build a detail page.
  • Power BI - Displays a BI report in Workspace. Define source and formatting. When a user views this Power BI component in Citrix Workspace, they are first prompted with a Power BI login. When this component is first added, no service actions are selected and you cannot edit the component. You must set up service actions for user authorization. After setting up service actions, set up authorization in the component. For complete steps, see Configure Power BI component service actions.
  • Concur Receipt Viewer - Displays a receipt image. Define source with data table and data column, and formatting.
  • Tableau - Displays a Tableau report. Define source with data table and column.
  • HTML Content - Displays HTML content from pulled sources (for example RSS feeds) to display HTML correctly. Define source with data table and column. Basic text elements are supported. The allowed elements are:

    • “p”, “div”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “ul”, “ol”, “li”, “blockquote”, “b”, “i”, “font”, “s”, “u”, “o”, “sup”, “sub”, “ins”, “del”, “strong”, “strike”, “tt”, “code”, “big”, “small”, “br”, “span”, and “em”.
    • “a” element only with attributes “target” and “href”.
    • “img” element only with attributes “height”, “width”, “src”.
    • Also, the “style” attribute is allowed on any element.
  • Attachment - Lists attachments from data source and allows end users to download attachments. Images can be previewed directly. Define source by specifying the data table, data column for URL, and data column for mime type (media type). Metadata must be synchronized correctly in the cache to be mapped properly when configuring the component.

Layout component

Layout section provides the grid component for setting the layout of your page.

Detail view of layout components

  • Flexible Grid - Gives you more control over the positioning of components on your pages as allows for an easier “snap-in” of the components. Helpful when you’re designing pages intended for devices with larger screens. Set the label and the total number of cells you want in your grid. For an example of this component in use, see Build a create page and Build a detail page.

Page Details

Page details let configure the page you are creating and setting filters for information and providing various informational debugging features:

  • Page Name - Set the name of the page.
  • Data Filter - Use to set constraints on the action data.
  • Show SQL - Use this to display the SQL for debugging purposes.
  • Logic - Use this to add and display the component logic. Find details of ADD LOGIC in the following section.

Logic

Select the ADD LOGIC button under the Page Details tab to open the logic configuration. This enables you to configure the logic for your particular page component. Create conditions using standard logic arguments to achieve various outcomes depending on the desired behavior of your component. You can add multiple, stacked actions to any single button to create multiple action effects with a single click. When each service action runs successfully, the system moves through the chain of actions until all are completed. Actions include:

  • Evaluate Condition - Set and edit condition via a logical argument.
  • Set Component Value - Set the component value for the button to commit an action.
  • Show Component - Configure conditions to show the component.
  • Hide Component - Configure conditions to hide the component.
  • Enable Component - Configure conditions to enable the component.
  • Disable Component - Configure conditions to disable the component.
  • Set Component to Required - Configure conditions to require the component.
  • Set Component to Not Required - Configure conditions to exclude the component.

Component Properties

Each page builder component has its own specific properties menu with various options to choose from depending on the component including:

  • Label - Customize the label of the button, text, image, and so on.
  • Size - Set the size of the button, text, and so on.
  • Style - Switch between different colors and formats for the text, button, and so on.
  • Show in Blade Footer - Toggle to display the element in the page blade.
  • Data Source - Select the data source for the displayed element.
  • Data Table - Select the data table for the displayed element.
  • Data Column - Select the data column for the displayed element.
  • Conditional Formatting - Configure conditional formatting for the page element.
  • Insert Variables - Add variable to the page element to automatically display application integration data.
  • Display toggles - Toggle how the element displays on the page builder.

Actions

The actions menu is present for the Button component to allow the microapp recipients (Workspace user) to respond with actionable input. Define the action that the button runs from the configured service actions that you configured in the integration. Actions include:

  • Run Service Action
  • Send Email
  • Add G Suite Event
  • Back
  • Go to Page
  • Go to URL
  • Run Notification Trigger

Use component values as parameters

You can use component values as parameters in Send Email and Go To URL actions. This feature allows:

  • (Send Email) Workspace users can enter email recipients in a Workspace field for a given action.
  • (Go To URL) User’s input from a Workspace form can be used as a part of a URL template opened in Workspace.

Follow the steps below according to your use-case.

Add a Send Email Action

  1. After adding a Button component to the builder and completing Button Properties as required, select the Actions tab.
  2. Disable the Page Action Button toggle. In the Add Action field, select Send Email.
  3. Under To, select INSERT VARIABLE.

    Page action steps

  4. On the Insert Variable screen, from the Type menu select Component value.
  5. Under Component, select your required input component that a user enters on their Workspace form. The To field populates with the component ID.
  6. Add a Subject and Body for the message as required. In Workspace, users can enter an email address in the field enabled by this component. When they submit the email address, their email opens with a prepopulated message that can be modified if necessary and sent.

Add a Go to URL Action

  1. After adding a Button component to the builder and completing Button Properties as required, select the Actions tab.
  2. Leave the Page Action Button toggle enabled. In the Add Action field, select Go To URL.
  3. In the URL Template field, enter the URL of target site that you want to open.
  4. Under URL Template field, select INSERT VARIABLE.
  5. On the Insert Variable screen, from the Type menu select Component value.
  6. Under Component, select your required component. The URL Template field populates with the component ID added to the URL you entered. In Workspace, users can enter a value in the field enabled by this component. When they submit the query, the selected component value is used as a variable in the URL that is opened in their browser.

Note:

Select the info icon next to a template field to view detailed annotation about used components.

Configure Power BI component service actions

The out-of-the-box microapps that come with the Power BI template have the components configured as needed. If you want to make changes or add other microapps, follow these steps as a model. Important considerations include:

The Power BI component setup is needed to authorize the logged in user before they can view a dashboard, report, or tile. To set this up, you need to configure a service action to generate a token for the user. Configure this for Dashboards, Reports, and Tiles. Authorization works as a regular Service Action. For example, if you have a separated OAuth 2.0 authentication method for Service Actions setup, the user will be asked to log in to Power BI and only then the component will show the desired content.

  1. In the Edit screen for an integration, or from the menu, select Service Actions from the left side navigation column.
  2. Configure these new service actions as required using these Power BI endpoints:

    • Dashboards https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/dashboards_generatetokeningroup
    • Reports https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/reports_generatetokeningroup
    • Tiles https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/tiles_generatetokeningroup
  3. Select Add service action. This action needs groupId and dashboardId, reportId, and tileId parameters. Use the model below as an example:

  4. Under Action execution select the BODY tab. Select JSON from the Content type list.

    { “accessLevel”: “View” }

    Now set up authorization in the component using this newly configured service action. Follow the general example below:

  5. In the microapp, for example a microapp where you are pulling data for dashboards, select any page where you have the Power BI component.
  6. Select the Power BI component, and then the Power BI Authorization tab on the right-hand side.
  7. Select Edit parameters, and complete the fields as you see below:

  8. Select Save to finish.
Page builder components