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--> ```