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 ishere.

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 theUI 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 ascreens managementmenu, reusablewidgets, adrag-and-dropinterface, aproperties panel, and a本地化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:你的团队已经通知新的追踪公司nsent 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 Androidand 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. TheStylepanel 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 theSourcetab of the NSS UI Builder. If you want to learn more about the JSON structure, please check out theofficial 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:

Live preview

一个伟大的创新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, thePreviewmode 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

Conclusion

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 recordinghere.