Build a create page 编辑

Build a create page to add records into your system of record. This article assumes that you have already created your microapp for this workflow. For step-by-step details, see Add a new microapp.

We recommend housing this page in a separate microapp for these reasons. Keep these considerations in mind when designing your workflow:

• You can have only one action per microapp. Meaning, you cannot have a search page and create page in the same microapp if you want them both as actions.
• To allow for different user permission settings, if needed.

Note:

Create functionality is limited based on API write-back access.

For this Create page, start with a Form template, and then use the following builder components:

• Static Text - Define static text to appear the page.
• Flexible Grid - Gives you more control over the positioning of components on your pages. Helpful when you’re designing pages intended for devices with larger screens. Consists of Grid Items. Set the label and the total number of cells you want in your grid.
• Text Input - Define text source by specifying the data table, column, and value to load to the page entered by the user. 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. If this component is not mapped to record value, users use the field to input text.
• Select - Allows users to choose from a set list of values. Populated by data from the source system or you can enter the list of values manually. Actions can be added.
• Lookup - Allows users to search though a large quantity of values and allows users to select a value by searching for something else.
• Button - Add a clickable component on the page with actions and logic.

The following image shows an example create page showing details mapped to the data columns listed below that we built with the components listed above. For this page, and microapp, we need to map to the following data columns:

• project
• issue type
• priority
• assignee name

Follow these steps:

1. After you have added the microapp specifically for this create action, select that microapp. For step-by-step details, see Add a new microapp. Select Pages, and Add New Page.
2. Give the Page a name, and select the Form template.

3. Confirm your Data source and select the Data table that you want to access. Select Add.

   The new page is added to the Pages list and is ready to be customized. The builder page populates with the fields we selected. Now let’s customize the page.

4. Select and drag the Static Text element to the top of the builder panel.
   • Select Static Text Properties, and in the Content field, enter Create Ticket.
   • Under Text Type, select Header.
5. Select and drag the Flexible Grid element to the builder panel. Use the Grid Items to place our other components. You need to add new cells. Select the Flexible Grid Properties tab, and under Total Number of Cells change the value to 8.
6. To add a Title field, drag a Text Input component to the top-left Grid Item.
   • Select the Text Input Properties tab. In the Label field, enter Title.
   • Disable the Map to Record Value toggle.
   • Activate the Required toggle.
7. To add a Project drop-down selector, drag a Select component to the top-right Grid Item.
   • Select the Select Properties tab. In the Label field, enter Projects.
   • Under Select Type, select Select from Database.
   • Disable the Map to Record Value toggle.
   • Select Data Table, Data Column from the menus. In our case, project and id.
   • Activate the Required toggle.
8. To add an Issue type drop-down selector, drag a Select component to the middle-left Grid Item.
   • Select the Select Properties tab. In the Label field, enter Issue Type.
   • Under Select Type, select Select from Database.
   • Disable the Map to Record Value toggle.
   • Select Data Table, Data Column from the menus. In our case, issue_type and name.
   • Activate the Required toggle.
9. To add an Assignee name searchable field, drag a Lookup component to the middle-right Grid Item. Use this component because it allows users to search easily though a large quantity of values.
   • Select the Lookup Properties tab. In the Label field, enter Assignee Name.
   • Under Select Type, select Select from Database.
   • Select Data Table to Search, Data Column to Search, and Data Column to Use as Value from the menus. In our case, user and display_name.
   • Disable the Display Additional Data Column toggle.
10. To add a Description field, drag a Text Input component to the lower-middle-left Grid Item.
    • Select the Text Input Properties tab. In the Label field, enter Description.
    • Disable the Map to Record Value toggle.
    • For this field, do not activate the Required toggle to automatically add an (optional) tag to the field.
11. To add a Priority drop-down selector, drag a Select component to the lower-middle-right Grid Item.
    • Select the Select Properties tab. In the Label field, enter Priority.
    • Under Select Type, select Select from Database.
    • Disable the Map to Record Value toggle.
    • Select Data Table, Data Column from the menus. In our case, priority and name.
    • For this field, do not activate the Required toggle. This automatically adds an (optional) tag to the field.
12. To add a Create button, drag a Button component to the bottom-left Grid Item.
    • Select the Button Properties tab. In the Label field, enter Create.
    • Leave the Style option as Primary to make it a blue option button.
    • Select the Actions tab. Ensure the Page Action Button toggle is enabled. This displays the button in the footer of the blade and closes the Workspace blade after the action is completed.
    • Click the Add Action drop-down and select Run Service Action.
    • Click the Run Service Action text. Click the Data drop-down, and select the integration you want to connect to. Click the Action drop-down, and select the action you want to take, in this case Create Issue.
    • Select EDIT PARAMETERS, and complete all required parameters based on the fields you created for the page. You can model yours after this example:
13. To add a Cancel button, drag a Button component to the bottom-right Grid Item. This allows users to reload the page without submitting changes.
    • Select the Button Properties tab. In the Label field, enter Cancel.
    • Select the Style option as Secondary to make it a gray option button.
    • Select the Actions tab. Click the Add Action drop-down and select Go to page. Select this microapp for App and the name of this page you are creating for Page to make this page refresh itself when you select cancel.

    You finished building the create page. As a final step, let’s select this page as the action page for the microapp, and make it visible in the list of actions for this integration.

14. Select Properties. This is the cog on the left when you are in the builder.

15. Under Actions, select the Enable as Action toggle and select this page in the Action page menu.

    This create page is now ready.