Create a Fiori App without writing a single line of code

2017-08-14 Alex Fiori I described the SAP Web IDE earlier in this article, based on the powerful features of the SAP Web IDE today, creating a Fiori App without writing a single line of code.

Of course, not writing a single line of code created by the actual project is still too naïve, but through the standard template can basically build a basic framework of the app, for the later development of great convenience. Through this process, we have a general understanding of the basic technical UI5,MVC architecture of Fiori.

We created a Fiori app today to display the header information of the financial voucher, which is similar to the first page of the Manage Journal entries that I have been working on as an example, except that the input information such as filter is not directly and unconditionally output. The OData service:fac_financial_document_srv_01 is called

The build Fiori app includes the following sections:

• Define the data source, through the definition of the data source can establish and back-end system data connection, complete data deletion and modification, the data source refers to: OData Service;

• Create a data model, configure the model type, data source, URI;

• Design page layout, based on UI5, display the header information of financial vouchers on the page;

• Binding a data set based on an OData service;

• Bind page elements and OData Service data fields.

First, log in to Webide and create a New project from template that is based on the templates.

We chose SAPUI5 application Template.

Create Project Name:

Select the View type and name

Click Finish, our project is created, the Basic code framework of the Fiori app is created, and we will see the page as follows:

Note that there are three separate folders for model, view and controller, where model is a data model, view is a page view, and controller is the control module, which is the business code section. MVC is a common structure for front-end development, starting with struts, jsf,spring and other front-end frameworks, which are basically the same architecture.

Add a data source

To develop the Fiori app, you first need to define the data source, and all the apps aren't actually consumer data, updating or adding data. The developer-defined data source is mostly JDBC/ODBC, and today's DataSource is the OData Service. As I mentioned before, Fiori consumption ERP data is used as an interface through SAP Gateway as a tool OData service.

Click File: Manifest.json, which has two editing views: Descriptor and Code Editor,

Right-click on the file Manifest.json and select Open With descriptor Editor

Because our intention today is to try not to write code, so I choose Descriptor, of course, as an experienced God, you can choose Code Editor.

In descriptor Editor, to data Source Tab, here we configure "where" "how" to , click the button "+", select SAP system and services, such as:

Click Done.

Then we will see the following page:

Please note the OData Service and URI.

Create a default model

In the file Manifest.json Click Models page, the default will appear i18n (internationalized information model, is to store Fiori app page text information)

Click the "+" button to create a new model, follow the add information, and set it as the default.

After you create the model, for example, note the following information:

Although we did not write a line of code, but webide actually in the background silently help us to write the code, see the automatically generated code:

View information for the design page

View files also have a visual interface and code interface, because we do not write code today, so we use the view interface dragged. View interface is mainly composed of HTML5 elements, if it is HTML5 developers, you can choose the development interface. For example, I drag a list element to the page to display the header information for the financial document.

Configure page Control display information

We only need a list item, the other two can be deleted.

Select this ListItem and click on the button next to data set to bind.

Binding OData Service Data Set Header to page control

Binding OData Service Entity Type Properties (fields) into the list item

For example, the List item has two parts, title and description, and we need to bind the information separately:

Double-click the field and select the field.

OK, we set it up, click the Save button to save the file, and click the Test button to test it.

can see the following page, although humble, but build their own Fiori App, is not a little excited?

See the title information is the default, we can modify it. I mentioned earlier that i18n is an internationalized configuration information, where the corresponding field information can be found to be modified.

Modify, save, and then test the page, such as:

SAPUI5 Events

Our article today is here to end, really did not write a line of code! But in order to prove that I can actually write code, I added a little bit of content.

Click on the list item, select Events on the right-hand side, select Press, create function, such as:

Click New function, enter function name, then the system will automatically generate function in the controller, such as, of course, the specific code statement we still need to write.

Write a line: alert ("Testing:navigating to Document lines Item.");

Ok, test it.

Today's article really ended here, we just point, drag a drag on the creation of a Fiori App, and the data really from the SAP system, I would like to say, based on the development of Fiori is so simple and convenient, the future S4hana Fiori applications will be more and more and better.

The content of this article belongs to the personal opinion, does not represent any official.

Create a Fiori App without writing a single line of code