Using the new NSS UI Builder to easily design native mobile CIAM flows
On May 17, 2021 we presented the webcast “How to Rapidly Deliver a Seamless Registration and Login Experience”. The presenters of the session were:
- Alejandro Perez – Product Expert, SAP Customer Data Cloud
- Ian Hametz – Customer Identity Product Lead, SAP Customer Data Cloud
- Naomi Ko – Senior Product Marketing Manager, SAP Customer Data Cloud
The link to the recording is here.
In this webcast, we introduced and demonstrated the latest SAP innovation for integrating SAP Customer Data Cloud in mobile applications named “Native Screen-Sets (NSS) UI Builder“.
Are you familiar with the UI Builder? It is a powerful web-based tool with an easy to use drag-and-drop interface for building and editing login, registration, and profile management screens.
The new tool: “UI Builder for Native Screen-Sets” or “NSS UI Builder” seeks to replicate all these first-class features on mobile devices and using SAP Customer Data Cloud Mobile SDKs.
Native Screen-Sets (NSS) UI Builder
What is NSS?
NSS is a cross-platform technology developed by SAP that results in best-in-class login and registration workflows for native mobile apps with screens managed centrally for no-code updates and changes. If you want to learn more about NSS and its capabilities, please check out my previous blog post: Learn to Deploy Native Screen Sets as Part of Your Mobile strategy.
NSS UI Builder: first-class feature parity
SAP’s goal was clear: “let’s replicate our existing UI Builder functionalities as a new ‘NSS UI Builder’“. The result was better than anyone expected. The tool not only offers a screens management menu, reusable widgets, a drag-and-drop interface, a properties panel, and a localization tab among other features. It also improves some of these elements in comparison with the ‘Web’ UI Builder. For instance, let’s look at the Localization tab:
New NSS UI Builder Localization tab
In this tab, you can add new locales, identify and enter value for missing translations, all in the same window. The best part? Translations will be reflected in your iOS and Android apps right after saving the changes.
Imagine this scenario: your team has been notified of a new tracking consent that must be captured -as soon as possible- in your mobile apps registration screens, along with purpose translations (label text) for 5 different languages. Depending on your implementation, this might involve changes in both iOS and Android projects, compilation, testing, and deployment to the App Stores.
How this lifecycle is improved with the NSS UI Builder? Drag-and-drop a checkbox widget into your NSS Registration screen, bind it to a consent field, and add translations. That’s it! After saving changes, all your users will be presented with the new registration screen, rendered as a native experience for both iOS and Android and loaded directly from SAP servers. All these changes, done directly from your SAP Customer Data Cloud Console, and in less than 20 minutes. Isn’t this a game changer in mobile development?
Designing a beautiful mobile app UI
Replicating registration, login, and profile management screens created by a professional designer in the NSS UI Builder is easier than what you think. The Style panel allows customising all aspects of your widgets, such as the colours, opacity, alignment, margin, border, and font.
For advanced tasks, such as adding customized themes and using them as a reference to a specific component, you can also access the NSS json object in the Source tab of the NSS UI Builder. If you want to learn more about the JSON structure, please check out the official NSS developer documentation.
How much can you customise your screens? Here’s an example of a registration screen I customised in a few minutes for the webcast demonstration. Just needed a header image, some border and colour settings, all done with no code thanks to the Style panel:
One of the great innovations available as part of the NSS UI Builder is the Live Preview mode. If you notice at the beginning of this blog post, changes in the properties panel are instantly reflected in the layout view. Furthermore, the Preview mode offers a more accurate visual representation of your screens in a mobile device, as well as routing behaviour (e.g. what happens when I click on the ‘Sign up’ link), and finally ensuring your translations are loaded in the labels as you change the locale:
NSS UI Builder preview mode
This brings an end to my blog post of the Native Screen-Sets UI Builder tool. As usual, 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 webcast recording here.