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:

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

   • Build a notification
   • Localize microapps
   • Add a new microapp

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 the 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.
• Embed - Create a page that renders an iframe for embedding custom webpages in your microapps.

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.

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 the text source of the 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 the 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, and so on 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, and so on 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.

Note

Configuring the Lookup component with the ‘Contains’ strategy can result in long load times for a search term. We recommend you test with a large sample of data to check whether there is an impact on performance and user experience. Alternatively you can use the ‘Starts with’ strategy to improve performance, but only records that start with the search term are returned.

Multiselect lookup

Multiselect lookup works in a similar manner to the Lookup component and allows users to search through, and select a large quantity of values by searching for an alternative value.

For example users can search and add multiple users or user emails when scheduling a meeting, or add multiple labels when creating a Jira ticket. To specify where your data is pooled for use by the multi select lookup component you must configure the array data type during service action configuration in your HTTP integration.

Example use cases for multi select:

• Webex - Select multiple users to send a meeting invite.
• Smartsheet - Select multiple users to share a sheet.
• Jira - Select multiple labels to assign to a single Jira ticket.
• Office 365 Calendar - Select multiple attendees when scheduling an event.
• Office 365 E-mail - Select multiple email recipients.

Configuration

Configuration is similar to Lookup but has two more configuration options: “Max items count” and “Can create new items”. Apart from the standard page builder configuration options, define the following to configure Multiselect lookup:

Map to record value - defines the data source for preselected values and is available only on the detail page (a record id is required). Unlike Select, Multiselect lookup is not restricted to a single value.

Data source for options - defines the data source for options of the drop-down list.

Search term matching strategy - selects whether the search term matches the start of the database value or anywhere inside the database value.

Max items count - sets the maximum number of items selected during a search.

Can create new items - enables users to create items that are not yet available in the lookup selection (for example, add new labels to a Jira ticket).

Integrity Check

The integrity check works the same as lookup but the maximum number of items selected must be non-negative. The data source table must exist and table columns for value, display value, and additional data must be correctly mapped to a data table with a foreign key.

For more information on configuring your arrays to return multiple entries, see Data types.

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.

File upload component

Allows uploading raw files to the SoR during submit or update actions. To enable this action, create a special service action that supports file upload.

This component enables user workflows for uploading files to SoR as attachments to existing records and as attachments when creating records. For example:

• Jira: Upload log files and screenshots and attach them to an issue ticket.
• Salesforce: Upload a discovery agreement document, and attach it to an account or opportunity.
• SAP Concur: Attach a receipt when managing expense reports.
• ServiceNow: Upload an attachment as part of a submission workflow.

Create service action

To enable file uploads, scripting must be used to configure a service action. There is a FILES parameter type to support this capability. For a general overview, see HTTP integration scripting.

Before you begin

• Ready your script that you want to import via the Microapp administration interface.
• Scripts must be written in the javascript language edited in your preferred text editor / development tool.
• When ready, import the script via the integrations tab in the Microapps admin interface or optionally you can enter your script directly into the text editor provided in the scripting feature.
• When imported, test the script.

The following is an example of a service action which uploads multiple files at once to JIRA. For more scripts, see this Script repository.

```javascript
function addAttachmentsSingleRequest({client, actionParameters}) {
    console.log(`attaching file(s) to issue ${actionParameters.issueKey}`);
    const formData = new FormData();
    const url = `/rest/api/2/issue/${actionParameters.issueKey}/attachments`;
    actionParameters.attachments.forEach(file => {
        formData.append("file", file);
    });
    const response = client.fetchSync(url, {
        method: 'POST',
        headers: {
            "Content-Type": "multipart/form-data",
            "X-Atlassian-Token": "nocheck"
        },
        body: formData
    });
    if (response.ok) {
        console.log('Attachment(s) posted');
    } else {
        const errorMessage = `Request failed(${response.status}: ${response.statusText})`
        console.error(errorMessage)
        throw new Error(errorMessage)
    }
}
<!--NeedCopy--> ```

Import the script

To import your prepared script, follow these steps:

1. From the integration configuration screen of the integration, select Scripting from the left-hand navigation.
2. Select Upload script. Alternatively, you can input your script directly into the text area by selecting Edit.
3. Drag your script onto the import pop-up.
4. The script is parsed and validated.
5. Select Import.
6. Your script is imported.

More information about scripting

• To get started developing scripts, see Citrix Developer Portal.
• For an end-to-end process of setting up a custom integration using scripting, see Getting started with Microapps scripting.
• For examples of Microapps scripts, see Microapps script SDK.

Configure the File upload component

Now return to the page in the microapp for this integration that you want to create for uploading files. After dropping the File upload component in the builder, complete the File upload properties.

1. Modify the value for Label if desired. By default, this is File upload. No label is required. This value appears above the drop frame in Citrix Workspace.
2. Modify the value for Max files count if necessary. By default, this is 1. This value appears next to File upload limit under the drop frame in Citrix Workspace. When multiple files are selected, metadata upload and content upload for each file occurs independently. This capability is limited by the SoR.
3. Modify the value for Max file size MB if necessary. By default, this is 5. This value appears next to Total size limit under the drop frame in Citrix Workspace. File size is limited by the SoR. We recommend configuring the maximum file size to what is actually needed to prevent a waste of resources.
4. Enter a value for File extensions (e.g. .jpeg, .png, .pdf). No value is required. This value appears next to Accepted file formats under the drop frame in Citrix Workspace. This field is not case sensitive and does not accept special characters.
5. Enable the Required toggle if adding a file is required to submit this page. A This field is required label is shown above the drop frame in Citrix Workspace.
6. Disable the Enabled toggle if you want the drop frame to appear dimmed and unavailable in Citrix Workspace.
7. Disable the Visible toggle if you want to hide the drop frame in Citrix Workspace.

Considerations

Users should consider the following limitations when uploading content:

• The file name must end with one of the allowed suffixes. All characters are allowed except for null byte \0.
• Microapps service does not provide file storage. Files are uploaded directly to the SoR. During the upload process Microapps service first transfers the file from a users computer to secure temporary storage and then immediately streams the file to the SoR. Processed files on the temporary storage are from that point not accessible for any purpose to anyone and are deleted after a short period of time.
• Users can remove a file that they have previously selected and pre-uploaded before confirming the upload.
• The file type (mime type) is detected by the browser based on the file’s extension. Microapps service does not use the file type for any checks.

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.

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, and so on 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.

Embed

Allows webpages to be embedded in your microapps using the builder and then displayed in Citrix Workspace. Supported content includes: public YouTube videos, Google maps, Podio/Google/Microsoft forms, most public responsive webpages, and any content designed by its provider to be embedded into a website and displayed in an iframe.

Some external content is not designed with embedding in mind or it is strictly prohibited. For example

• Webpages that explicitly forbid embedding by sending the X-Frame-Options "SAMEORIGIN"; header. A notable example is https://google.com.
• Webpages that redirect to a different domain than what is specified in the component configuration in the page builder.
• Webpages that require authentication can run into problems when embedded. Administrators must test carefully.
• Webpages that contain cookie consent (for example, for GDPR requirements) do not have their selections cached in the embed component. If a user accesses the embedded site again, they must reconfirm cookie consent each time unless the site uses the SameSite: none; secure=true cookie attributes.

Configure the Embed component

After dropping the Embed component in the builder, complete the Embed Properties.

Note

To successfully embed content from some websites you must use the embed code generated directly from the website (as opposed to a direct URL or share link). For example, when generating an embed link on Google Maps via the Share option, use the link generated from Embed a map rather than Send a link.

1. Enter the URL of the content that you want to embed.

2. Select one of the Height mode options to choose how the embedded content size is determined.

   • Width multiplier: Enables a Multiplier (in percents) field. Enter a percentage value in relation to the width of the embedded content. For example, if you enter 50, the displayed content is half the height of its width.
   • Fixed: Enables an Absolute height (in pixels) field. Enter a pixel count to determine the height of the embedded content.

Embedded content previews are not available in the builder. Select Preview microapp to see how the embedded content looks.

Considerations

Consider the following when embedding content:

• Use embeddable versions of webpages when possible. These pages have already been optimized for embedding by the content provider. For example, a YouTube video with id XXX can be accessed at https://www.youtube.com/watch?v=XXX and https://www.youtube.com/embed/XXX. The first URL leads to the full site and the second to the embeddable video.
• When specifying a URL, you can use template variables to pass a parameter over to the remote URL. For the same YouTube example and assuming you have a data table called video_id containing video IDs, enter https://www.youtube.com/embed/{video_id} into the URL field. The string {video_id} will be substituted by the row value from your table.
• The embedded page is displayed in a sandboxed iframe with the following attributes: allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms allow-pointer-lock allow-downloads. These flags ensure complete isolation of the third party content from Citrix Workspace, but can cause some functionality on the remote page to be broken.
• The Embed component cannot display documents which require custom browser plug-ins. For this reason, PDFs cannot be shown within the Embed component.

Layout component

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

• 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 are 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 does not 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 extra 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 does not 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 do not want end users to have the ability to change.
• Visible toggle - Used in case you need extra 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 do not 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.

   

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:

• To display a report the first time, users must log in to Power BI.
• There is a limit to the number of embed tokens a Power BI master account can generate. You can purchase more capacity. For more information, see https://docs.microsoft.com/en-us/power-bi/developer/embedded/embedded-faq#technical.
• AS Azure or AS OnPrem live connection reports may experience a delay after rebinding. For more information, see: https://docs.microsoft.com/en-us/rest/api/power-bi/reports/RebindReport.

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