Vraag hier een demo aan van SAP Sales & Service Cloud, SAP Emarsys, SAP Customer Data, of SAP Commerce Cloud en krijg inzicht wat de oplossing jou te bieden heeft!
Ik wil een demo over: var ss_form = {‘account’: ‘MzawMDEzNzKxBAA’, ‘formID’: ‘BcFHEQAwDAMwRH5lw8m5MX8IlbJn0zxg1Qt_SawoVJxmSF3kBw’}; ss_form.hidden = {‘_usePlaceholders’: true}; ss_form.width = ‘100%’; ss_form.height = ‘1000’; ss_form.domain = ‘app-3QNE707L5A.marketingautomation.services’; // ss_form.hidden = {‘field_id’: ‘value’}; // Modify this for sending hidden variables, or overriding values // ss_form.target_id = ’target’; // Optional parameter: forms will be placed inside the element with the specified id // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
Over the last few years I have done some work on SAPUI5 apps, and although I don’t consider myself an expert in the field, I do like to stay informed regarding recent developments. That’s why I have looked at the state of SAPUI5 in 2020. I will dive in some history, but also show how recent developments allow us to create nice applications quickly.
History of SAPUI5
In 2009, a team within SAP started developing new UI technologies, based on the (then) cutting edge web development technologies, under the name of “Phoenix”. The main objectives were to:
Create an extensible framework
Develop a consistent UI
Have less coupling with the backend technology, as was very much the case with their legacy UI
From the beginning, it supported – now commonplace – features such as:
Automatic databinding,
A rich set of UI controls
Support for theming.
These features aid developers to quickly build applications with a consistent look and feel. Because of the decoupling with the backend, it is possible to have more frequent iterations on UI level, while the backend release cycles can be much more stable and predictable.
SAPUI5 vs OpenUI5
Around 2013, SAP decided to open source the SAPUI5 library as a separate version. This move allows non SAP customers to use the same frameworks and tooling and even to contribute to it. OpenUI5 didn’t replace the SAPUI5, both frameworks are still available and in active development. SAPUI5 is richer in controls and features, while OpenUI5 is free and can be extended by everyone.
(The term Fiori is also used in conjunction with SAPUI5. Fiori isn’t a technology, but a design language, or set of design guidelines. Fiori apps are – typically – SAPUI5 apps that confirm to the Fiori guidelines and principles, centered around a pleasant and consistent user experience.)
Current state of affairs
With releasing OpenUI5, SAP is trying to attract web developers who are not so familiar with the SAP environment and tooling. There are a few recent developments that show thap SAP is continuing in this direction:
UI5 Evolution
In the previous years, efforts of SAP have focussed on expanding the SAPUI5 framework. With UI5 Evolution SAP is restructuring the framework in smaller, more manageable units.
This has the following advantages:
It is easier for SAP to add new functionality or develop some components faster than others
The smaller modules can be individually consumed instead of the whole framework. This leads to smaller, faster applications.
Also jQuery is now being completely removed (Yay!), favoring more modern dependency management.
UI5 Tooling
Traditionally, there were two favoured ways of setting up your development environment. Either you would:
Run your app on an on premise Netweaver Stack where you would develop the application either in SAP Gui or in Eclipse for ABAP
Run your app on SAP Cloud Platform and develop the application in the Web IDE
However, non-native SAP web developers expect a javascript framework to:
Follow modern conventions (command line tooling, modern dependency management)
Allow you to bring the tools of your choice (for example Visual Stodio Code)
Be able to run locally or on a server transparantly
Not have to download and manage your libraries manually
SAP has heard these complaints and has developed UI5 Tooling, a cli toolset that allows developers to build applications locally with ease. It has been in development since 2018, and recently they’ve launched version 2.0
You get:
A build system
A local server/runtime
Dependency management of sapui5 dependencies and external dependencies. No more manual downloads/versionings of sapui5 components. (Yay!)
Yeoman: A code/app generator to generate a skeleton to get up to speed quickly
Additional functionality, such as a reverse proxy
You bring:
Your own editor
Your own source control
Getting started
So, how do you start a new project with UI5 Evolution/UI5 tooling? There is some good documentation available, but let’s walk through an example.
Prerequisites:
You have installed npm
You have some familiarity with the command line
You are familiar with openui5 or with general javascript frontend development
Installing ui5 tooling:
$ npm install --global @ui5/cli
$ ui5 help # verifies installation, lists available commands
Target a specific sapui5 or openui5 version and load the core of the ui5 framework:
$ ui5 use sapui5@latest
$ ui5 add sap.ui.core
The ui5 tooling has now created an empty app and has loaded the most recent sapui5 core modules. You can add additional dependencies as needed. Let’s add support for theming and sap.m, the main UI control library:
$ ui5 add sap.m themelib_sap_fiori_3
Let’s setup our application with a rootview and a model tied to an odata webservice. See the github repo for a complete list of files.
Here, we define a view with a simple table that will be loaded with Activity data.
You can start the server with:
$ ui5 serve
Navigate to http://localhost:8080/index.html. This should yield a nice list of activities from your C4C system. However, something is wrong:
A quick inspection in your browser developer toolbar shows the problem:
The web application is not allowed to be served from localhost and make a direct connection to the external system. A proxy server is used often to bypass the issue. As said earlier, UI5 tooling brings a proxy server. Install it like this: