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 Ming.le - 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.