In this article, each Ops Portal view section will be discussed in detail, covering the selections, settings, and options of the HTML control.
The HTML control creates a view that can display the output of any selected Flow.
This article describes how to:
Watch the tutorial video below to learn how to create the HTML View using the Synatic Operations Portal.
Creating a new HTML View
Go to the Operations Portal menu and select the Operations Portal Tutorial.
Adjacent to the Views tab, click ⨁ to add a new View.
Select HTML in the selection list.
3. Give the View a name and a meaningful description.
The Control type
Select the HTML option to display the output of the associated Flow in an HTML page format.
Click on the Control field and select the HTML option. The HTML control window for this View opens and lets you edit the relevant values and options as described below.
The Flow
Each View created requires that a previously created Synatic Flow is selected for use when the view is run. You may create a new Flow or alternatively, you can select the Flow you want to use from the selection list.
Input Schema
The Input Schema is used only in cases where a Synatic Flow has been configured to capture input data before it can execute. The input data might relate to fields in an attached database to search for or filter the output data. Alternatively, the input value may be used in a calculation.
We'll use the Input Schema designer to build an input form to capture and pass data to the selected flow.
The Schema Viewer and Raw Schema tabs are used to view the data only.
The Designer tab is used to add input fields to capture the required data.
You click + to add data objects.
The "string" option is used to select the appropriate data type from the selection list.
The Required checkbox is selected to ensure that the value is entered at runtime. The flow will not continue if the value is not entered.
HTML Template
You can customize an HTML page with your own branding to serve your custom page content.
Your custom page content can contain any HTML elements, including CSS and JavaScript.
Apart from all the regular editor options, you can select the </> button to open the coding mode to paste any direct HTML code, or alternatively, use a designer to create your page layout.
To retrieve data from a source, and display it on the page, you can extract the data using the field names and their associated value. For example, in the image above the data is placed on the page as:
Author: {{Author}}
Name: {{Name}}
The field name Author can be obtained from the output of the Get All Books flow which is displayed as follows:
In Synatic, you can use the Handlebars template to process the data value of the field by writing it as {{Author}}.
Options
Select the following options to further define your view output.
Return Source - For this tutorial, select Auto from the dropdown list. The options are described as:
Auto- Auto detects the appropriate output.
Record- Returns the current record processed by the sub flow.
Output-Returns the output of a Writer Step (if any) in the sub flow.
Result- Returns the output of the Destination Step (if any) in the sub flow.Execute Automatically - Select the checkbox to execute the flow in the View automatically.
Save the View
When you have completed the View's configuration, click the Save View button.
Test the View
It is always advisable to test each view you create in Synatic's Ops Portal.
1. Select the Ops Portal option in the Account menu to open the Operations Portal. This is also the method used by the operations personnel to process these views.
2. Select the HTML view you created from the list of available views.
3. Clicking the Load Page button will render the contents of the HTML page created in the assigned Flow.
Useful Tutorials
Revisit the Getting Started page for a refresher.
Learn more in the Operations Portal tutorials.