Kudos App - Build the App

Get Started with the Kudo App Prototype

1. Select lobby to access the entry page of SAP Build.

2. In the lobby, use the search field to locate the project named CHRO - Kudos App - Prototype.

   

3. When you find the template app, select the Navigate arrow (1) on the right-hand side.

4. Select the Versions tab (2), locate the Editable version, and select the Options icon (3). Then choose Save As New Project (4)

   

5. On the next screen, enter the following:

   Input Field	Input Value
   Project Name	CHRO - Kudos App -
   Description	Kudos App Project

6. Select Save As New.

   

Once your project is saved, it should open the editor automatically, as below. If the project does not open automatically, simply choose your project’s name in the lobby.

You can see the main components of the UI are already in place:

View Integrated Data and Workflow Process

1. Click Integrations on the Build Apps editor screen

   

2. On the Integrations screen you can see that your project has inherited some integrations from the template you copied.

   • kudos_db: This is a CAP service that has been built using SAP Build Code and deployed to Cloud Foundry. It holds data for our Kudos Awards and Employees. For the purposes of this Basic Trial we use a CAP service for all our data, but of course it is possible to integrate data from SAP S/4HANA Public Cloud, SAP SuccessFactors, SAP Ariba, SAP Concur and more when working with SAP Build.

   • Kudos Process: This is a process automation within SAP Build. This workflow has been deployed to the public environment and added to your project. When you click the “Submit” button on the Kudos home screen, it will trigger this process and start a Workflow for approval of your Kudos award by the receiving party’s manager.

   

   If you would like to further explore the integration between business processes and low-code applications in SAP Build, check out the Basic Trial workbook Extend S/4HANA with SAP Build which is also included in your Basic Trial Request.

Complete the App

Now, let’s complete your application.

1. Click on User Interface to return to the UI editor

   

2. You may have noticed when you first opened your project that the Details field is missing when compared to the app UI from the introduction section. You are now going to add this field, have it store the input in a page variable and then pass that variable to the Kudos Workflow Process in our application logic.

3. From the objects list on the left hand panel, locate the Input Field item. Then click and drag a new Input Field onto the UI so that it is located below the Summary field.

   

4. Click on your new input field to open the properties pane. You will configure this input field to store the detailed context of the Kudos award.

   

5. In the Label field enter the text: Details

   In the Placeholder text field enter thet text: Please add a short paragraph outlining the context for the Kudos you are submitting…

6. You now need to take the input of this field and bind it to a variable so that we can pass it to the Business Process when the Kudos award is submitted. Click the “X” icon under Value to edit the binding.

   

7. Select Data and Variables, then select Page variable

   

The page variables are pre-configured in the template as a method to store the input data from your app.

8. From the list of available Page variables select details then select Save

9. Your final step to complte the functionality is to pass this variable, which stores the input from the Details field, to our Business Process when the Submit button is clicked. Select the Send Kudos! button and then select Add Logic to Button 1 to open the Logic Canvas.

   

10. You should now see the Logic Canvas open

    

The key part of this logic is the Trigger Process item. As you have an integrated SAP Business Process Automation project as part of your app, we can use this function to start the process based on the input we have gathered in the form.

However, to complete the setup you need to pass the value from the input field you added into this trigger process step.

11. Select the Trigger Process step to open the properties panel. Then select Custom object.

    

12. On the Edit Bindings screen you can see the required inputs for the Trigger Process action, and the variables from your app which are already assigned to the inputs. The comments input is empty as this is where you will pass the contents of our details field. Select the ABC icon under comments

    

13. Select Data and Variables, then select Page variable

    

14. From the list of available Page variables select details

    

15. Now select Save and then Save again

    

16. Finally, make sure to Save your overall project using the button on the top right of the interface.

    

You are now ready to try out the completed Kudos App!