Microapps

Page builder

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.

Page builder walkthrough

The screenshot below shows the complete page builder with sections called out. Descriptions follow below referencing the numbered sections:

Full view of page builder with callout matching lines above

  1. The top bar has selectable breadcrumbs on the left. Selecting the page name (in bold with an open menu icon on the right) allows you to quickly jump between pages. In the middle you can select either standard monitor or mobile view. On the right you have preview options. Preview page presents a view of this page you’re viewing in the builder. Preview microapp delivers a mock workflow of the microapp actions where you can open all pages and view notifications and their actions.
  2. The left-hand side has quick navigation options to screens in the microapp. From top to bottom, you can jump to a list of all Notifications or Pages in this microapp, the Localization screen, and the Properties screen where you can modify the name, description, and icon. For more information, see

  3. Components are in the left pane. Select and drag them to the builder canvas in the middle section of the screen. See Page builder components. Components are divided into Input, Display, and Layout.

    • Input components create actionable sections on your page including buttons, text input, and radio buttons.
    • Display components deliver information to your end users of microapps including tables, static text, and images.
    • Layout component provides the grid component for setting the layout of your page.
  4. The builder canvas is the middle section. You can move the components around here to arrange them as you require. Select the component here to enable component properties, actions, and other tabs that are visible in the right pane.
  5. Customize the components and add page details in the right pane. The Page Details tab lets you configure the page you are creating by entering name, setting filters for information, and adding logic to page components. Also, use informational debugging feature. This tab remains the same for the page and this tab does not depend on the selected component. Other tabs differ depending on the component that is selected. Available tabs include:

    • Properties: Each page builder component has its own specific properties menu with various options to choose from depending on the component.
    • Input validation rules: Some components enable their own specific validation rules.
    • Actions: Different actions are available depending on the components. Actions allow the microapp recipients (Workspace user) to respond with actionable input.

    Other tabs that are unique for one component are fully described with the relevant component below under the Display components and Layout component sections.

For a complete list and description of available component property fields, toggles and selectable elements, see Component properties.

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 and is connected to a particular record from the cache.
  • Form - Create a page that provides static details in addition to the ability to input user data into your page.
  • Table - Create a page listing multiple records 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 these components described below 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 more about button actions, see Actions.
  • Text input - Define text source of displayed data by specifying the data table, column, and value that a user sees on 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 of displayed data by specifying the data table, column, and value that a user sees on 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 source of displayed data by specifying the data table and column that a user sees on 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. For an example of this component in use, see Build a create page.
  • Lookup - Allows users to search through a large quantity of values and allows users to select a value by searching for something else. You must specify where the data is being pooled from. 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 either date, time, or date and time to display in the microapp, and 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. Wherever you can select user email as a variable to extract data when building an action page, you can use an Active Directory user principal name (UPN) attribute. This includes page and component filters, constraints, and service action parameters.

Detail view of display components

  • Table - Add a table to display a list of records 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.

    A Columns tab is enabled in the right pane after selecting this component. Add as many columns as required with these settings: Column title, Data type, Data table, Data column, Format, and Conditional format. See Component properties for explanations of these fields.

    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 Data filter feature. Select the table in the component builder pane. Select Table Properties and then Data filter. Select +Add Condition and add the constraints as required. For an example of this component in use, see Build a detail page.

  • List/Grid - Displays a list of data to users in Citrix Workspace. Select from preconfigured layouts to surface the right information in a way that suits your data the best. You can define items in the list manually or pull them from the cache.

    Under the List properties tab, select either:

    • Data table to pull data from the cache. The List data source, List items data source, and Layout & Style tabs are available. Property descriptions for List data source and List items data source are available in Component properties.
    • Specify manually to define items in the list. List items and Layout & Style tabs are available. For List items, define what items you want in your list. Property descriptions are available in Component properties.

    The Layout & Style tab is available for both types of list properties. The Layout menu provides a selection of preconfigured layouts. Choose the layout that best suits your needs from the following options:

    • List - accordion: Displays expandable text only content units.
    • List - basic: Displays text only lists.
    • List - bulleted: Displays unordered, bulleted text only lists.
    • List - ordered: Displays ordered, numbered text only lists.
    • List - thumbnail: Displays lists with thumbnails and styles.
    • Grid - hero image card side: Displays cards with a large image on the side.
    • Grid - hero image card top: Displays cards with a large image on the top.
    • Grid - image: Displays multi-columned image units.
    • Grid - thumbnail side: Displays multi-columned lists with thumbnails.
    • Grid - thumbnail top: Displays center-aligned content units.

    Text only layouts allow you to toggle Show title and Show description. You can disable one of these, but not both options. Thumbnail layouts open a Show image toggle and other formatting options for images. Other property descriptions are available in Component properties.

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

    The Text component is designed to display a single database value. An Integrity check is run and alerts users if a page relies on a record ID. For detail or form type page that is set as an action page, a page data filter is required to call on a unique record. We show this message to alert you of this issue. Your microapp might work as is, but the component can display the wrong data if the unique record is not passed over to the page.

  • Static text - Define static text to appear on 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 - Display a static image referenced from a predefined static URL source. Image size and alignment can be specified. No actions can be added.
  • Image - Display an image using its URL stored in the cache (data table and column) and formatting to display on the page. Add text to display 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 can be specified; that is data table, data column, and format. 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.

    A Power BI component properties tab is enabled in the right pane after selecting this component. 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. The Concur receipt viewer component is only visible in Concur integration template.
  • 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.
  • Attachments - Lists attachments from data source and allows end users to download attachments. Images and PDFs can be previewed directly. Define source by specifying the data table, data column for URL, and data column for name.

    • If data mime type (media type) is not configured, then attachment preview icon appears as ?.
    • If file size is not configured, then attachment preview shows 0B as the size.

    Select Attachment URL security option:

    • Inherited: Attachments must be housed on the same domain that the integration accesses. If not, the attachment does not display and cannot be downloaded. For example, this is a known issue for Google integrations.
    • Public: Public attachments from other domains can be displayed if they do not need an authentication method.

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. This option is helpful when you’re designing pages intended for devices with larger screens.

    A Flexible grid properties tab opens in the right pane after selecting this component. Set the number of columns and rows that you want in your grid and customize alignment. For an example of this component in use, see Build a create page and Build a detail page.

Page details

Configure the page you are creating by entering name, setting filters for information, and adding logic to page components. Also, use 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.

Add 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. Specify the behavior or appearance of the components on this page. 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. Available 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.
  • Placeholder text – Explain to user how to use this component. For example, list attributes that a user can search with.
  • Content – Enter static text to show end user.
  • Alignment – Set alignment of displayed text or image.
  • Text type – Set text size of displayed text.
  • Font style – Set font style of displayed text.
  • Font size – Set font size of displayed text.
  • Field width – Set how wide a component displays.
  • Format – Define how data is formatted when displaying to users. For example, date, time, decimal, percent, and so forth.
  • Default value – Used for the Input components to set default value manually or by using variables.
  • Style - Used for the Button component to switch between different predefined colors and formats.
  • Use records related to the page – Use for the Table component to filter records related to the record displayed on the page. For example, you have a page displaying data about an account and you want to display the table with a list of contacts related to this particular account.
  • Map to record value – Toggle to display data for a particular record from the cache for the Input components. For example, enable this toggle when you create an Edit type page because you want to display actual data to end users before these values are changed. On the other hand, if you are creating a Create Record type page, do not enable Map to record value because this page is not tied to any existing record. Thus, it doesn’t make sense to map your Input components to any record.
  • Select type – Select source of options for the Select component and Radio component.

    • If Enter values manually is selected, then Value and Label must be completed. Value is then used in the service action and Label is what the end user sees in Citrix Workspace.
    • If Select from database is selected, then you must complete these fields: Data source for options, Data table for options, Data column for option label, and Data column for option value. Data column for option value is then used in the service action and Data column for option label is what the end user sees in Citrix Workspace.
    • A combination of Select type and Map to record value can be used for different use cases. For example, Select from database together with enabled Map to record value is usually used for Edit type pages. In this scenario, Data table and Data column is used to display current data, Data source for options, Data table for options, Data column for option label, and Data column for option value is used to display all other available options from the cache which the end user can use while editing a record.
  • Data source - Select the data source for the displayed element.

    • Use Column value if you want to display one particular column from the cache.
    • Use Template if you want to display a string of various attributes from the cache. For example, account address is split in the cache into 3 columns, but you want to display them all together in one component.
  • Data table - Select the data table for the displayed element.
  • Data column - Select the data column for the displayed element.
  • Conditional format - Configure conditional formatting for the element.
  • Insert variables - Add variable to the page element to automatically display application integration data.
  • Data filter - Set constraints of displayed data. Select Set filter, then Add, and add the condition constraints as required.
  • Data order/Order – Set order of displayed data. Select Set order, then Add rule, and the rule constraints as required.
  • Display additional data column toggle – Used for the Lookup component to define an additional column to be shown to users while performing search.
  • Search term matching strategy – Used for the Lookup component to define search strategy.

    • Starts with - This search method is the fastest as it doesn’t overload the cache. It searches first characters of values in the defined cache attribute. This search method is satisfactory for most use cases.
    • Contains – Depending on the size of your data collection, this search method can be very slow. It searches through all characters of values in the defined cache attribute.
  • Field width - Used for Input components to define the width of the input field.
  • Required toggle - Used for Input components so that the end user is prompted to enter data before the button with configured service action is actionable.
  • Enabled toggle - Used for Input components to display data for a particular record that you don’t want end users to have the ability to change.
  • Visible toggle - Used in case you need additional data for Page logic, Go To Page and so forth, but you don’t want this information to be shown to the end user.
  • Hide if empty – Used for some Display components when you don’t want to show this component at all to end user if no data is available.
  • Alt. text/Alt attribute – Used for Image component. Enter the text that shows if there is a problem displaying the image.
  • URL prefix – Used for Image component to configure static prefix for a URL while the rest of the URL is taken from Data table and Data column fields.
  • Image size – Select the size of the displayed image. For example, Thumbnail or Full width.
  • Image shape – Select the shape of the image. For example, Circle or Rounded corners.
  • Layout - Select from preconfigured layouts for the List component.

Input validation rules

Add rules for some input components to restrict format of data user can type in. Each component has its own specific validation rules available. There is always a minimum and maximum option to set.

This tab is available for these components: Text input, Date/Time, Text area, and Num. input. See each component description for more details.

Actions

The actions menu is available for the Button component to allow the microapp recipients (Workspace user) to respond with actionable input. Different actions are present for different components.

Enable Page action button

Enable the Page action button toggle to display the button component in the footer of the page blade in Citrix Workspace. A different subset of actions is available for the Button component based on this toggle. Consider the following:

  • If the button is displayed in the blade footer, the blade is automatically closed after the user selects the footer button in Citrix Workspace.
  • If you want to add actions such as Go To Page or Go to URL, you don’t want to show buttons in the blade footer so that Citrix Workspace can navigate end users to the next screen. Such actions are not available if you enable this toggle.

Add action

Define the action that the button runs from the configured service actions that you configured in the integration. Actions include:

  • Run service action - Define the action that the button runs from configured service actions that are set up in the integration. See Configure Service action parameters for an example.
  • Send email - Sends an email based on pre-configured attributes. See Add a Send Email action for an example.
  • Add G Suite event - Creates Google Calendar events based on pre-configured attributes.
  • Back - Navigates user to the previous page.
  • Go to page - Navigates user to a pre-configured microapp page. See Add a Go to Page action for an example.
  • Go to URL - Navigates user to a pre-configured URL. See Add a Go to URL action for an example.
  • Run notification trigger - Runs a pre-configured notification event. See Add a Run notification trigger action for an example.

Add a Go to Page action

Define an action to send users to a pre-configured microapp page.

  1. After adding a Button component to the builder and giving it a name under the Button properties tab, select the Actions tab.
  2. Disable the Page action button toggle. In the Add action field, select Go to Page.
  3. Select Go to page under Actions. Action label field, App selector, and Page selector open.
  4. Under App, select the microapp that you want to choose the page from.
  5. Under Page, select the page that you want the button to open.
  6. (Optional) Under Target page record select Set conditions if you want to filter data in the configured page. For example, a user is viewing a page with account data. The user selects a button labeled Opportunities and, based on the target page record conditions, is navigated to the page with a list of all related opportunities with expected value higher than a certain value.
  7. (Optional) Under Populate target page select Edit fields if you want to pre-populate fields in the target page. For example, a user is viewing a Jira ticket and wants to create a new one in the same project. The user selects a button labeled New and is navigated to page where the Project field is pre-populated with the value from the previous page but all other attributes must be entered manually.

Add a Run notification trigger action

Define an action to trigger a notification to run an evaluation of notification events and send notification messages to the target audience. This action can be displayed in the page body or in the blade footer.

  1. After adding a Button component to the builder and giving it a name under the Button properties tab, select the Actions tab.
  2. Leave the Page action button toggle enabled to show the button in the footer of the page. Disable the toggle to show the button in the body of the page.
  3. In the Add action field, select Run notification trigger.
  4. Select Run notification trigger under Actions.
  5. Under Events, select the event trigger that you want to run. You can select more than one event for this button.

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 naming under Button properties, 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 naming under Button properties, 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