App Builder Reference Guide

Creating dataservices
In order to load data into the Infor App Builder from your API, you must
map available dataservices within the required components.
In order to use API endpoints as dataservices in App Builder, some
mappings might be needed between the API input and App
Builder properties.
1. Click inside the component to open Properties, then click Manage
Dataservices.
2. If there is no current dataservice listed, then you must add one.
The list is then populated with the user data.
3. Click + Add Dataservice then select one of these options:
 Create from API: Search the ION API registry of suites, then map the
API to a dataservice.
 Add from Repository: Add an already created dataservice from the
repository to your project.
 Import from File: Add an already created dataservice from the file
system to your project.
 Configure Dataservice Manually: Skip search and lookup and enter
manually enter input and output parameters. The endpoint must still be an
ION API endpoint.
 Create BI Dataservice: Create a dataservice that maps an Infor
Business Intelligence Query created in the Infor BI Query Editor.
4. For the example described in Tutorial, select Create from API.
5. From the Suite menu, select Infor [Link], then click Search.
6. Filter by the GET HTTP method, then scroll down to select Get newly
registered users, then click + Create Dataservice to open the dataservice
mapper wizard..
7. The Basic Request Information section shows the HTTP Method and
the API Relative URL.
To edit the API Relative URL, foe example, to correct something or to replace input
parameter placeholders with static values, click the edit icon of the selected API.
When the API input is a JSON object sent in the request body (typically
the case when the HTTP method is POST or PUT), a sample object is
typically provided for the selected API. Click VIEW JSON to view this
object and also edit it if required. When executing the API from the
dataservice, this will be the object sent as body input.
The properties of the sample object can be mapped to App
Builder parameters by the Input Parameters definitions. These
mappings are constructed from JSON Paths identifying the property in the
JSON object.

You can also provide the JSON object with static data that you input into
the API, but cannot be changed through the app you are currently
building.
Note: For help with constructing JSON Paths, click JSON HELP.
8. The Input Parameters section shows the Name, Type, and an
optional Alias of all input parameters currently set.
Use the checkboxes to make parameters Mandatory.
9. To add new input parameters, click + ADD then select one of these options from
the menu:
 Path Parameter: Add parameter mappings to the API path. The added
parameter is reflected in the API Relative URL. For example:
 items/search/item/resource/Preview/stream/{path0}
 Matrix Parameter: Add parameter mappings as matrix parameter to the
API path. The added matrix parameter is reflected in the API Relative URL.
For example:
 items/search/item/resource/Preview/
stream;matrix0={matrix0}
 Query Parameter: Add parameter mappings as query parameter to the
API path. The added query parameter is reflected in the API Relative URL.
For example:
 items/search/item/resource/Preview/stream?query0={query0}
 Body (jsonpath) Paramter: Add a parameter mapping to the input
JSON object. The locator of the JSON object property to the map is
constructed from a JSON Path defined in the Name field of the input
parameter. For example:
$.[Link][0].[Link][0].value
10. To remove input parameters, click the Trash icon.
11. For this example, the userGUID parameter is used.
For better visual representation in the UI, change the alias to 'Unique ID'.
12. Click NEXT.
13. Next, you need to define the output parameter mappings for the properties you want
to use in the designer.
The output of an API execution can be either a JSON object or a file stream. For the
purpose of this example, it is a JSON object, which is used as a reference when you
construct or edit the dataservice.
You need to map the properties of the JSON object to the dataservice
parameters used in App Builder
a. First, you need to set the root level from where to lookup further
defined output parameters. In this example, the output will be a list of
items with these properties:
 UserId
 UserName
 FirstName
 LastName
 Email
The root element is therefore:
$.ColleagueRelationshipList[*]

From the defined root element level, you can then define the
output properties to map.
b. Click + Add, then set the name to a JSON path to the required
property relevant to the root element definition, for
example, .[Link], then enter a UI friendly alias.
c. Continue to map these JSON path definitions to provide output
parameters for UserName, FirstName, LastName and Email:
 .[Link]
 .[Link]
 .[Link]
  .[Link]
14. Click Next.
15. Enter a name for the dataservice and an optional description, then click NEXT.
16. Review the information, then click DONE.
17. Click CLOSE.
To get the UserGUID parameter, you need to create another dataservice:
a. Select Infor [Link] Suite and search for userdetail.
b. Create a dataservice for "/[Link]/User/Detail"
c. On response: Root Element = $ UserDetailList[0]
d. Add output parameter Name:.UserGUID
e. Name the dataservice [Link] - Get Current User
f. Optionally, add more dataservices for use in the tutorial.

Creating and managing interactions

After you add a component to the canvas, you can create interactions
between it and other components.
1. Select the component to open the Properties pane.
2. In the Interactions tab, you can set Trigger Event, Target Action,
and Data Key Mapping.

Trigger Event
Select the Component and the Trigger from the menus.

Target Action
Select the Component and the Action from the menus.
3. Optionally, in Data Key Mapping, add an additional connection.

Tutorial

In this tutorial, you will build an app to manage users, containing a list of
user names and email addresses, together with contact details and
photographs.
Note: You must ensure that you can connect to a dataservice before you proceed with this
tutorial. See Creating dataservices for more information.
1. From the Dashboard, select + New Project.
2. Enter 'User Management' in the Project Name field, then optionally, enter a
description.
3. Select the two-column template, then click Create.
4. Click inside the canvas, then select AppPanel from the breadcrumb menu at the
bottom of the canvas.
5. Select Dataservice [Link] - Get Current User from the Dataservice
menu.
6. In the Interactions tab, select "Application"."On Startup" as the trigger
event.
7. Click the + icon, then drag and drop the List component into the left column of the
canvas.
The first row is the header and the second row is the first list item.
8. Click inside the list component to open Properties.
9. Select the Get newly registered users dataservice from the menu.
 This applies a single dataservice to all content in the flexbox.
10. Select the Content tab, then enter 'All Users (email)' in Display Value.
11. Select the Interactions tab.
12. Change the Trigger Event to "AppPanel"."Dataservice has Run"
13. Edit the Data Key Mapping so that userGUID gets its values from "in Context
Value"."userGUID"
14. Now, you want to split the right flexbox into two.
15. Click inside the flexbox to open Properties.
16. Click the Content tab, then click Add Row.
17. Click the + icon, then drag and drop the Tabs component into the lower right
flexbox.
18. Click inside the Tabs component to open Properties.
19. In the Content tab, click Tab 1 next to the arrows (< >), then specify 'User
Details' as the new name, then click SAVE.
20. Repeat with Tab 2 and rename as 'User Permissions'.
21. To delete Tabs 3 and 4, click the tab name, then click DELETE.
22. Click the + icon, then drag and drop the TextBox component into the 'User
Details' tab.
23. Click inside the text box to open Properties.
24. Enter UserId in the Placeholder Display Value.
25. Continue to add text boxes and display names for these fields:
 UserName
 FirstName
 LastName
 Email
26. Click inside the 'User Details' tab to open Properties.
27. Select the Dataservice from the menu.
You can select Get newly registered users or any other dataservice you
have created.
28. Click the + icon, then drag and drop the Button component below the final text
box.
29. Click the button to open Properties.
30. Select the Content tab, then enter 'Save' in Display Value.
31. As previously, select a dataservice or create and map a new one.
32. Click inside the 'User Permissions' tab to open Properties.
33. Select the Dataservice from the menu.
You can select Get newly registered users or any other dataservice you
have created.
34. Click the + icon, then drag and drop the Radio Button component below the
final text box.
35. Click the radio button to open Properties.
36. Enter 'APPBUILDER-Administrator Placeholder Display Value.
37. Continue to add radio buttons and display names for these fields:
 APPBUILDER-Designer
 APPBUILDER-User
 DATA-Administrator
 GRID-Administrator
 HOMEPAGES-Administrator
 HOMEPAGES-ContentAdministrator
 HOMEPAGES-User
 INFOR-SuiteUser
  INFOR-SystemAdministrator
38. Click the + icon, then drag and drop the Image component into the new flexbox.
Note: The image component will fill the entire flexbox. To make the image
smaller, increase the padding.
39. Click the image to open Properties.
40. Select the Dataservice from the menu.
You can select Get newly registered users or any other dataservice you
have created.
41. Optionally, use the slider on the right of the canvas to emulate how the app would
look on a mobile device.
42. Click Launch to view how the app would look like to the end user.
43. Once you are happy with the final design and all dataservices are connected, return
to the dashboard, select the project and click Publish.
The newly created app is now available for use in the App Hub.