On September 15, 2020 we presented the webinar “Learn to Deploy Native Screen Sets as Part of Your Mobile strategy | Go Digital the Right Way (Part 3)”. The presenters of the session were:
- Alejandro Perez – Technical Architect, SAP Customer Data Cloud
- Stephen Purvis – Principal Product Expert, SAP Customer Data Cloud
In this webinar, we introduced the latest SAP innovation for integrating SAP Customer Data Cloud in mobile applications named “Native Screen-Sets (NSS)“. The result: best-in-class login and registration workflows with screens managed centrally for no-code updates and changes.
The link to the recording is here.
The necessity of a native experience
In the past, implementing registration, login and other user-facing flows in a mobile app was regularly done with:
- Web Screen-Sets, a fast time-to-market implementation approach but tends to deliver less responsiveness and less “native look & feel”.
- Custom Native Screens (either fully Native or using a Cross Platform framework like Flutter or React Native). This implementation approach delivers the best UX and customisation, but drastically increases the development effort required.
Although each approach allowed our customers to deploy highly customized user interfaces, it was clear to our team the opportunity to simplify the implementation and deployment of CIAM on mobile applications.
The best of both worlds
I like describing NSS as “the best of both worlds”. On one hand, it allows your app to maintain the native experience by rendering iOS and Android native components on your CIAM screens.
On the other hand, your development team can still enjoy the benefits of SAP Customer Data Cloud Screen-Sets. What does this means? No need to write code for core flows such as Login, Registration, Reset Password, and others. Instead, these operations are automatically handled by the NSS engine.
Therefore, I could summarize Native Screen-Sets as a:
Low-code, cross-platform solution for delivering beautiful natively-compiled CIAM screens with out-of-the-box flows and routing between screens
Native Screen-Sets are rendered based on a JSON object. The JSON-based mark-up can be compiled into your app or loaded centrally from SAP Customer Data Cloud servers to facilitate updates. The image below illustrates how this JSON schema would translate into a Profile Update screen:
Sample NSS JSON definition and NSS Screen-Set rendered on a mobile device
Native Screen-Sets Features
During the webinar, we discussed some of the features that make this technology a game changer in CIAM mobile development. Let’s review what I consider the top 5 features:
1. In order to start your Native Screen-Sets flow, you can simply include the JSON file as an application asset in your project or save it directly in the SAP Customer Data Cloud Console. If you have used Web Screen-Sets in the past, then you are familiar with this second approach.
2. By routing from one screen to another, you can use NSS to create a continuous flow of screens. Here’s an example:
Sample routing definition in the NSS JSON schema. No need to code switching between screens
3. The 2-way-binding to Account fields for displaying and/or editing screen field drastically reduces development effort. One simple attribute “bind” will save you many lines of code attempting to get and set values on otherwise custom native screens. Here’s an example of this attribute in action:
Sample binding of first name schema field to a NSS textInput component
4. How to style the NSS screens? NSS ships with a set of components that deliver on runtime high-quality Material Design (Android) and Cupertino (iOS-style) interfaces. This means you can specific styling properties on each NSS component to match your app and corporate branding.
Sample required field and regex validations in the NSS JSON schema
This brings an end to my 2nd blog post of the SAP Customer Data Cloud Mobile SDK series. I’m very excited to see what the future holds for Native Screen-Sets and how our customers will be using this innovation to build native CIAM experiences in their apps.
To learn more NSS, please remember to check out the full webinar recording here.