02-04-Integrate-portal-and-process.md

Integrate the portal and process

Now that your low code portal is built and request API access process deployed, the final step is to integrate the two, so that the process can be invoked from a request form in the portal.

1. Open the API Product Detail page in SAP Build Apps.

2. Add a button to the bottom of the canvas and set the label to Request Access to this API.

3. Create a new page called API request form.

4. Customize the header and add three input fields below. Name them First Name, Last Name, and Email.

5. Add a dropdown field component and set the label to API Product..

6. Add a button and name it Submit.

7. Create a page parameter called APIProduct (just like the API Product Detail page).

8. Add logic to the Request access button back on the API Product Detail page to open the request form and pass the page parameter APIProduct.

9. Create an App Variable called APIList as a list of objects with 2 properties called id, and title.

10. Open the Home page, select the Basic Card list and Open in component template editor to modify the outputs of the component to store the list of API Products during the initial refresh.
    
    

11. Select PROPERTIES and add a list of objects to output values with 2 properties:

    • Property key: idDesc
    • id
    • title
      
      

12. Return to VIEW, select BASIC CARD LIST 1 from the tree, Show logic for BASIC CARD LIST, add a Set output value node, and connect it to the output of Set private data variable.

13. Set the output value to idDesc and configure the value as a mapping. Select the output from the get record collection node as the source data.
    
    

14. Set the map values to ID and Description.

15. Exit the editor and save the application.

16. Add a Set app variable node to the Basic card list and connect it to component tap event

17. Set the assigned value of APIList to the selected component value List of ids and descriptions

18. Return to API request form page and set the option list and selected value properties of the API Product dropdown.
    
    

19. Use the following formula for the option list: MAP<item>(appVars.APIList, { label: LOOKUP(item, "title"), value: LOOKUP(item, "id") })

20. A preview of the app now shows the dropdown list populated and the selected product highlighted as the default.

21. Add a REST integration under Data > Classic data entities and point to the API Proxy for the Workflow Instance endpoint (e.g. https://virtual-host.test-or-prod.apimanagement.datacenter.hana.ondemand.com/workflow/rest/v1/workflow-instances). Name the resource ID registrations as this resource will submit a developer registration request via the process deployed in the previous section.

22. Enable the POST method and add a basic authentication header if you applied security. This would again be the Base 64 encoded API Key and Secret for the proxy. Disable the other methods, such as GET COLLECTION and GET RECORD as they are not allowed by the API Proxy.
    
    

23. Set a custom schema for the POST and enter the input structure from the process:

    • context (object)
      • apiproduct (text)
      • country (text)
      • emailid (text)
      • firstname (text)
      • lastname (text)
      • userid (text)
    • definitionId (text)
      
      
      

24. You can see the input structure in the Process Details section of the deployed Developer_Onboarding process:

    

25. Save the data entity.

26. Add another classic data entity and select Marketplace search.

27. Install the RestCountries sample data entity.

28. Configure the RestCountries entity with a query parameter and the following properties:

    • Key: fields
    • Label: fields
    • Value: name,alpha2Code

29. Add a data variable to the API Request form page for RestCountries.

30. Duplicate the API Product dropdown and rename it to Country.

31. Set the option list to a mapping, select the data variable for RestCountries, and set the label and value fields to name and alpha2Code respectively.

32. Set the selected value property of the dropdown to No Value.

33. Add a page variable with type object, name it processContext, and repeat the field names for the process inputs. You can flatten the object by adding definition id as a direct property. The mapping to the REST endpoint will be handled below.

34. Set the Component onChange event for each input field in the request form to the corresponding named property of the processContext variable. Set the value to a formula STRING(self.value)
    
    

35. Use the email field for user id as well, so apply two consecutive Set page variable nodes attached to each other.
    
    

36. Add logic to the submit button, starting with an If condition. Set the Condition to a formula IF(IS_NULLY(pageVars.processContext), false, true). Note that we really need to check every field to ensure they aren't blank but for simplicity sake we'll check the entire object.

37. For Output 1, attach a Create Record node and configure the record properties as a custom object, mapping the page variable values to it. You can retrieve the values from the 2 dropdown menus directly by using Component Properties > Another component's property or output value option. Make sure you add the workflow definition id retrieved in the previous section.
    
    

38. For Output 2, attach a Toast dialog and set the message to Please complete all fields.

39. Add an additional toast dialog to the outputs of the Create record node to notify of success or failure. Fill out the dialog options:

40. Save the application.