ex2

Exercise 2 - Building the UI with the SAP AppGyver Composer

In this exercise, we will create the web application (UI) to list and create warranty subscriptions.

Exercise 2.1 Create Frontend Project

After completing these steps you will have created and initialised an empty UI project to perform next set of exercises. You have also setup some parameters that we'll use later.

1. Save the backend project and click EXIT BACKEND button.

• Click APPS button to go to SAP AppGyver Composer:

• If you've taken a longer break you can log back in with your workshop user credentials (email/password):
• https://platform.testgyver.com/auth/legacy

2. Create project by clicking CREATE NEW button and assign a name:

3. Rename the Empty Page and set the screen size

• Here we can select the page size based on the target preferred device for which we area creating the application. We will use Web:

4. Remove navigation

• Project was created with a navigation to allow users to move between pages
• We won't need the navigation for our two page application
• Choose 'Navigation' from top (1) and check that 'Navigation header bar' (2) is not enabled by selecting 'No' (3)

• Click 'Navigation menu' (1) and check that it is not enabled (2) and that our new WarrantySubscription page is selected 'Page' (3)

5. Close navigation view and click the toggle between View and Variables to navigate to variable editing view

• Click 'Page Parameters' from left side (1)
• These parameters are passed on to page when it is first opened
• Click 'Add Parameter' (2)
• Type 'AccountID' as parameter name (3) and give it some sensible default value. Keep parameter type as Text

6. Save the project from top right corner - it is good practice ro save the project time to time

Exercise 2.2 Create Data Sources

Now before proceeding to implement the UI, we need a way to fetch and create data using the API that we have implemented in the Exercise 1. This is done by creating data sources in the UI project. Note that we had also created Data Sources in the backend to implement the API but now we create the data sources in the UI project to use those APIs to read and create data.

1. Create Warranty Subscription Data Source

• Switch to the 'Data' tab and click 'Add Data Source':
• Select "AppGyver Cloud Integration (beta)":

• Choose the Cloud Integration you just finished and WarrantySubscriptions:

2. Create 'Registered Product Party Information Collection' and 'Warranties' data sources in the same way.

• Finally there Data Sources tab will look as following and you can close the Data view
  

3. Save the project

Exercise 2.3 Implement Warranty Subscription List Page

In this exercise we will create components to the list view to show all Warranty Subscriptions for given account. We will use new SAP AppGyver components that fetch data from our new backend with given conditions.

1. Clean-up and rename existing Components:

• Choose the title (1) and change 'Content' from 'Properties' (2)
• Type Warranty Subscriptions

• Remove paragraph and open Component Market

2. Install new component from the Component Market

• Use this token to search for the component: SfVOJZmYHpEB8vObtgisbg
• These Components will be released later without having to install them via tokens

• Choose Component from search results

• Install Component and accept additional installs
• Don't worry, it's not installing anything on you computer! It is only adding dependencies to the Composer project

4. Drag 'Basic data table' component from components to canvas (1) and click 'Configure' button (2)

5. Choose Data Resource for the Table

• Click value bind button:

• Choose 'Data resource':

• Choose 'WarrantySubscriptions':

• Click SAVE

6. Now we can choose how to filter data from our backend to the table

• Add condition (1)
• Type 'AccountID' to property name (2)
• Click value bind button (3)

• Choose 'Formula'

• Click existing formula to edit it
  

• Remove existing empty Formula

• Either type the simple Formula in or use UI to guide you through it

• Click SAVE button to go back to Table configuration

7. Hide all other fields than Product, CoverageTerm and WarrantyEnd. You can organize fields ordering by dragging them with a drag handle. Display text allows you to control what is shown to users as column header.

8. Save and launch the application in the preview portal. Once the application is launched you should see list of warranty subscriptions created.

• Click OPEN APP IN PREVIEW PORTAL button

• Open your App

• You will see a note 'No Data Available'
• Add query string parameter ?AccountID=1000034 to the end of the URL¨
• Ie. https://platform.preview.testgyver.com/<your app id>/productwarranty/page.Page1?AccountID=1000034

Exercise 2.4 Implement Warranty Subscription Creation Page

In this section we will create a page using which a warranty subscription can be created. This will be launched from first page using '+' button.

1. Open PAGES view (1) and create a new page (2)

• Name it Warranty Subscription Creation

2. Switch variable editing view (1) to add page parameter (2, 3) we get from list view

• Type AccountID to Parameter name (4)

3. While in variable editing view add data variables to components we're about to create

• Choose 'Data Variables' (1)
• Add Data Variable (2)
• Choose 'RegisteredProductPartyInformationCollection' but rename it to be shorter (3)
• Make sure Data variable type is Collection
• Add Filter condition (4)

• Choose 'Object with properties'

• Click 'Add Condition' button

• Choose 'RoleCode' and expect it to equal 60
• Then create another condition for 'PartyID' and click value bind button:

• Choose 'Data & Variables':

• Choose 'Page parameter':

• Choose 'AccountID' and the final conditions are done:

4. Add another Data variable from Warranties but this time no conditions are needed

5. Open Logic Editor from the bottom of the screen and remove delay from both Data Variables

• Delay is useful if you need to keep App up to date with latest changes from the backend but in this exercise we don't need that so it's better to remove it

6. Add three 'Page variables' to hold the data selected by the user:

Name	Type
selectedDate	date text
selectedProduct	text
selectedWarranty	text

• Click 'Page Variables' (2)
• Add page variable (3)
• Make sure the types are correct! Especially for selectedDate (5)

7. Go back to View and create Required Controls on the Page:

• Set the Title as Warranty Subscription Creation
• Frag two dropdowns from left side to canvas
• Rename the dropdowns to Registered Products and Warranty Terms from right side Properties like we've done earlier in this workshop

8. Create Date picker control for Warranty End date

• Install new component from Component Market same way we did it in last step
• Use token Ft6B2OsfRl-Woh0brYzOMw to search a component and install it
• Drag new Component to canvas
• Click value bind button from right side 'Properties' and you'll see familiar modals appear:

• Choose 'Data & Variables', 'Page Variables' and bind Value to selectedDate
• Type Warranty End to Components 'Label'

9. Create Save and Cancel buttons

• First create a container to hold and align the buttons

• Then drag buttons inside the container

• Change buttons styles accordingly

• Go to Layout tab and open 'Width and Height' section to change button width to 'Fit content':

• Change button 'Labels' to Cancel and Create:

10. Set 'Option list' and 'Selected value' for the Registered products dropdown:

• Click on the 'Option list' and set the formula value to:

MAP<Product>(data["Registered Products"], { label: Product.RegisteredProductID, value: Product.RegisteredProductID })

• In this formula, we are transforming the data retrive from the backend to the format that Option list needs
• Set the 'Selected value' to the page variable selectedProduct that we have created earlier. By doing this we will get the registered product selected by the user

11. Set 'Option list' and 'Selected value' for the Warranty dropdown:

• Click on the 'Option list' and set the formula value to:

MAP<Warranty>(data["Warranties1"], { label: Warranty.CoverageTerm, value: Warranty.id})

• Set the 'Selected value' to the page variable selectedWarranty

12. Configure Create logic

• Select the 'Create' button (1) and click on the 'Show Logic for Button1' from the bottom of the page (2)

• Drag 'Create Record' from 'Data' section (1)
• Set 'Resource Name' to 'WarrantySubscriptions' (2)
• Click 'Custom object' from 'Record' property (3)

• Bind values from 'Page Variables' and 'Page Parameters'
• Leave identifier and CoverageTerm empty

• Drag 'Open page' node from left side to Canvas (1)
• Connect nodes together (2, 3)
• Set navigation back to the 'Warranty Subscription' list page (4) and bind 'AccountID' to 'Page Parameter' with same name (5)

13. Also configure Cancel button to navigate back to the list page (same way as above).

Exercise 2.5 Link to Creation page from the List page

In this section we create the '+' button and link it to open the Warranty Subscription Creation page.

1. Save the project and go to 'Warranty Subscription' page

2. Drag Icon component to canvas above table and choose icon for the component

3. Set Icon layout to be at the right side of the screen

4. Open Icon logic editor from the dark bar at the bottom of the page

• Drag 'Open page' node to canvas and connect 'Component tap' to it
• Make sure 'Page' is selected as 'Warranty Subscriptions Creation'
• Map AccountID to 'Data and Variables', 'Page Parameter' and choose 'AccountID'

Exercise 2.6 Build and distribution

Finally we can build and distribute our project. Preview Portal URL that we used earlier cannot be shared with friends or colleagues because it has been authenticated one-time for your browser. That's why that same URL cannot be used to embed the page to your SAP Sales and Service Cloud mashups. Preview is a tool during the design and development. Now we're about to build the App for distribution.

1. Save and click 'Launch' from the top:

2. Click 'Distribute' from left side and then 'Open Build Service':

• Click CONFIGURE button

• In the below step you will give the unique name that will make the final url

• Continue with the 'Save & Next' with default values:

• Continue with the 'Save & Next' with default values:

• Continue with the 'Save & Next' with default values:

• Go back to SAP Appgyver and click on the build step

• Select a runtime version (preferably latest one) and provide the version number 1.0.0
• Copy the domain name but don't try to reach it yet, it will only work after the build has been 'Delivered'
• The build may take some time to complete

Summary

You've now implemented the frontend application and got the final url that will be used to mashup the application inside SAP Sales Cloud.

The application url will look like this: http://<unique name given>.wsapps.testgyver.com/?AccountID=1000000. It accepts one query parameter called AccountID.

Continue to - Exercise 3 - Excercise 3