There are numerous specific reasons for adding a link to an SAP Screen Personas flavor. In general, though, it’s done in order to streamline the user experience for your employees, customers, and partners who already access information, applications, and services in your organization via the SAP Cloud Platform Portal.
In fact, this is a common scenario for organizations who use the on-premise SAP NetWeaver Portal and who want to benefit from the simplification and other features that SAP Screen Personas brings to their screens (as one customer has done).
Obtain the URL to the flavor that will be added to the portal site.
You need to install Hybrid App Toolkit local add-on in your local environment.The installation and setup instructions for Hybrid App Toolkit local add-on can be found here
To create a CRUD master-detail application, we need a backend destination setup in SAP Cloud Platform. For this blog, we use SAP Gateway ES4 Demo System OData Service. If you have not previously signed-up for SAP Gateway Demo System, you can sign-up here
Go to Workspace, select OfflineApp/webapp/view/Master.view.xml
Right click on Master.view.xml, choose Open With/Layout Editor
Now we can view the file in Layout Editor. Drag the Button and drop to bottom panel of our app.
4. Select the button on the bottom panel that we just added. On the right-hand side canvas, we will see a Properties/Button setting panel. Delete values in Text and Width properties, add sap-icon://refresh to Icon property.
5. Now your bottom panel should look like this
6. On the right-hand side canvas, select Events setting. and Press, New Function
7. Enter onSyncData, click OK
8. Go to Workspace, open OfflineApp/webapp/controller/Master.controller.js file.
9. Replace empty onSyncData function with the following code
3. For Application section, enter the information as shown below. And for Build Options choose Release Mode. For Platforms, select Android
4. For Plugins section, under Cordova tab, check Network Connection; under Kapsel tab, check Logon Manager, Logger and Offline OData
5. Click Save button
Now we are ready to deploy the app to mobile devices through Hybrid app toolkit
Deploy the app to mobile devices
In this step we are going to deploy the app to selected mobile device and run the application in offline mode
Right-click on OfflineApp project and choose the menu option Run à Run On and choose your desired device/emulator
Wait for the HAT local add-on to created Cordova Project, Build the application in desired platform, Install the App on device and launch the application on device
On start-up, application will load the Logon Screen as below
4. Enter your backend Username and Password and tap OK on Logon screen. If Logon is successful, you will see the Passcode screen.
5. Tap Disable Passcode button to load the application. It will show the loading screen as below. This is an indication that our application is an offline application
6. After creating offline store, the application screen should be like below
Testing the offline functionality of the app
To verify whether our app’s offline functions are working correctly, we can try the following steps
Tap on HT-1000 row in master screen. This will navigate to detail screen.
Click the Edit button on the detail page of item HT-1000.
3. Change the Currency Code from EUR to SGD.
4. Click Save button.
5. Now on the phone screen, we can see that the currency code of HT-1000 has been changed.
6. Switch to WebIDE, and click run, to run our web app. We can see that the currency code of HT-1000 remains at EUR. This is because the changes we make on mobile app is only stored on local store and not yet updated in backend service.
7. Switch to the mobile app, and click the Synchronization button, wait for the synchronization completed successfully.
8. Switch to the web app that we are running, and refresh the page. We can see that after synchronization, the currency code is finally updated to SGD.