© nabisoft. All rights reserved. Proprietary and confidential.

Hacking the Explored App by Adding Custom Code

A smart way to share (Open|SAP) UI5 code snippets with others

www.nabisoft.com

Nabi Zamani, CEO & Software Engineer3/11/16

2www.nabisoft.com

Overview

www.nabisoft.com 3

Motivation

4www.nabisoft.com

Overview

www.nabisoft.com 5

What is the Explored App?

An app build with UI5 Looks like a Master-Detail app It runs on mobile devices #1 resource for Copy&Paste code snippets Illustrates / contains

UI5 features API usage Controls in action Best Practices Tutorials

Downloadable Code Available on GitHub

If you don’t know it very well you might want to get familiar with it

www.nabisoft.com 6

Where can I find the Explored App? Latest versions:

OpenUI5: https://openui5.hana.ondemand.com/explored.html OpenUI5 Beta: https://openui5beta.hana.ondemand.com/explored.html SAPUI5: https://sapui5.hana.ondemand.com/explored.html

Specific versions, i.e.: OpenUI5 1.34.8: https://openui5.hana.ondemand.com/1.34.8/explored.html OpenUI5 Beta 1.36.4: https://openui5beta.hana.ondemand.com/1.36.4/explored.html SAPUI5 1.34.8: https://sapui5.hana.ondemand.com/1.34.8/explored.html

GitHub: https://github.com/SAP/openui5/tree/master/src/sap.ui.demokit/src/sap/ui/demokit/explored

Hint – This is how to find the available versions: OpenUI5: https://openui5.hana.ondemand.com/versionoverview.html OpenUI5 Beta: https://openui5beta.hana.ondemand.com/versionoverview.html SAPUI5: https://sapui5.hana.ondemand.com/versionoverview.html

www.nabisoft.com 7

Getting to the Explored App is easy

www.nabisoft.com 8

The Explored App looks like a Master-Detail app

www.nabisoft.com 9

For every item in the master list you have one or more examples

www.nabisoft.com 10

Each example can be executed directly in the browser incl. mobile browsers

www.nabisoft.com 11

You can also check the source code before you download the whole example

www.nabisoft.com 12

Most of the examples use XMLViews – the recommended ViewType

www.nabisoft.com 13

Who could use the Explored App? Developers

Copy & Paste Code faster Effort estimation ...

UI/UX Designer Getting familiar with

Out-of-the-Box Look&Feel Consider what‘s easily possible

Product Owners / Concepters See what‘s possible Effort estimation

Everybody See how UI5 feels + looks like „Corporate Design“ Framework Evaluation Demonstration

14www.nabisoft.com

Overview

www.nabisoft.com 15

To get the code just clone OpenUI5 from GitHub

The Explored App is part of the Demo Kit

GitHub: https://github.com/SAP/openui5

Setup your dev environment:https://github.com/SAP/openui5/blob/master/docs/developing.md

Finally open the Testsuite: http://localhost:8080/testsuite/ Explored App: http://

localhost:8080/testsuite/explored.html

www.nabisoft.com 16

www.nabisoft.com 17

Disclaimer - What you will see from now on is subject to change

No public API published for „intrusion“ of own examples to the Explored App

But sometimes you have to break the rules

Let‘s break the rules and ask for forgiveness later

www.nabisoft.com 18

www.nabisoft.com 19

Categories are defined here Only place you might want

to change

Suggestion: do not change other parts of the Explored App itself

www.nabisoft.com 20

Component based app

www.nabisoft.com 21

Routing configuration is done in the Component

„Old“ Component no manifest.json file aka app descriptor

Component loads the root view

www.nabisoft.com 22

From the folder structure you can guess that the Explored App is an „old“ app

Views and Controllers are in the same folder

The root view app.view.js consists of a simple sap.m.SplitApp

23www.nabisoft.com

Overview

www.nabisoft.com 24

A few days/weeks ago the first sap.ui.table.TreeTable example was added

www.nabisoft.com 25

Basic OData TreeBinding without $metadata annotations and nav. properties

We want to add a new TreeTable example now Existing sap.ui.table.TreeTable examples can be found here:

/openui5/src/sap.ui.table/test/sap/ui/table/demokit/sample/TreeTable

Step 1: Changing the corresponding docuindex.json file: This file is typically in a „demokit“ folder /openui5/src/sap.ui.table/test/sap/ui/table/demokit/docuindex.json The content of this file is used by the Explored App

www.nabisoft.com 26

The SDK/Demokit knows how to find the docuindex.json file from the library‘s .library file

www.nabisoft.com 27

First modify the entities in the docuindex.json file

Add new entries to the entities array if needed In our case there is already entry for

sap.ui.table.TreeTable We just add a new entry to ist samples array For more information check the docuindex.json file

www.nabisoft.com 28

Then modify the samples in the same docuindex.json file

The id is the same entry you added to samples array on the previous slide The name will be displayed in the Explored App The description is also displayed

www.nabisoft.com 29

Next we want to implement the Example itself

From the docuindex.json file we can find out where to put our examples The namespace sap.ui.table.sample is mapped to

/openui5/src/sap.ui.table/test/sap/ui/table/demokit/sample/ So our sap.ui.table.sample.TreeTable.BasicODataTreeBinding example must be in the folder

/openui5/src/sap.ui.table/test/sap/ui/table/demokit/sample/TreeTable/BasicODataTreeBinding

www.nabisoft.com 30

Implementing the example

Examples are component based Our example consists of the following files:

metadata.xml: describes our Odata service Nodes.json: this is the mock data for out Nodes EntitySet mockserver.js: custom configuration of our mock server Controller.controll.js: our only controller (just for the sake of it) View.view.xml: Our only view, which is the root view

Component.js: here we call our mockserver and bind an OdataModel to theComponent. This file is loaded by the Explored App.

www.nabisoft.com 31

www.nabisoft.com 32

This mock data contains the hiarachy for the TreeTable No Navigation Properties No Annotations in the $metadata file The data actually looks like a flat list

www.nabisoft.com 33

www.nabisoft.com 34

www.nabisoft.com 35

Tell the TreeTable how to construct the Tree/Hierarchy

Feels like magic For details check the API docs

www.nabisoft.com 36

The component is called/used by the Explored App It loads our view

Files to be included in the downloaded archive

www.nabisoft.com 37

Our example is now in the Explored App

www.nabisoft.com 38

We can try it out – just as easy as we are used to do it

www.nabisoft.com 39

The can also have a look at the code

www.nabisoft.com 40

An we can download the files that we listed in the Component.js file

www.nabisoft.com 41

The downloaded archive even contains a generated index.html file

www.nabisoft.com 42

Get the code of the TreeTable example we saw on the previous slides

TreeTable with Basic OData TreeBinding + additional OData TreeBinding example:

Change (own fork): https://github.com/nzamani/openui5/tree/ui5con2016-treetable-explored-samples

I will create a pull request for this

www.nabisoft.com 43

Next Example: Tutorials inside the Explored App

Did you every think about displaying a PDF inside you UI5 app? Let’s create a tutorial that has four steps:

Displaying PDF files via <embed> Displaying PDF files via iFrame Displaying PDF files via iFrame that loads HTML wrapper for object/embed Displaying PDF files using pdf.js (https://mozilla.github.io/pdf.js/)

In all steps we will use sap.ui.core.HTML Therefore we want the tutorial to be part of sap.ui.core

Let’s do it…

www.nabisoft.com 44

This is what we want in the end

www.nabisoft.com 45

Step 1: Press a Button to display a PDF via <embed>

www.nabisoft.com 46

Step 1: Press a Button to display a PDF via <embed>

www.nabisoft.com 47

Modify the entities in the docuindex.json file (no other changes in this file!)

Add a new tutorial entity to the docuindex.json file at /openui5/src/sap.ui.core/test/sap/ui/core/demokit/docuindex.json

www.nabisoft.com 48

Create a new folder for the tutorial (i.e. by copying from existing tutorials)

Create folder: /openui5/src/sap.ui.core/test/sap/ui/core/demokit/tutorial/pdfviewer/

In this folder create the following index.html file (for convenience):

www.nabisoft.com 49

Create a numbered folder 01 for the first step of the new tutorial

Your app code will be inside the webapp folder of each step

Each step has a Component.js file which is on the same level as the webapp folder

Let’s call this file the “Step Component”

Each step is a Component based app

www.nabisoft.com 50

The Step Component defines The starting point of the step the files for download

/openui5/src/sap.ui.core/test/sap/ui/core/demokit/tutorial/pdfviewer/01/Component.js

www.nabisoft.com 51

Our index.html file loads our component based tutorial

This file will not change in later steps

/openui5/src/sap.ui.core/test/sap/ui/core/demokit/tutorial/pdfviewer/01/webapp/index.html

www.nabisoft.com 52

The Component.js is very simple It will not change later

/openui5/src/sap.ui.core/test/sap/ui/core/demokit/tutorial/pdfviewer/01/webapp/Component.js

www.nabisoft.com 53

In the App Descriptor we configure the routing It‘s as simple as the other published tutorials

/openui5/src/sap.ui.core/test/sap/ui/core/demokit/tutorial/pdfviewer/01/webapp/manifest.json

www.nabisoft.com 54

The rest of the magic “happens“ in one of our 4 PDF controllers (Step 1 + 2)

/pdfviewer/01/webapp/controller/PdfEmbed.controller.js

/pdfviewer/02/webapp/controller/PdfIframe.controller.js

www.nabisoft.com 55

The rest of the magic “happens“ in one of our 4 PDF controllers (Step 3 + 4)

/pdfviewer/03/webapp/controller/PdfIframeHtmlWrapper

/pdfviewer/04/webapp/controller/PdfJs.controller.js

www.nabisoft.com 56

What we have after Step 4

www.nabisoft.com 57

Pdf.js was introduced in Step 4 and it works great even on mobile devices

www.nabisoft.com 58

The tutorial step can also be accessed directly without the Explored App

www.nabisoft.com 59

Get the code of the PDF Viewer tutorial we created on the previous slides

PDF Viewer Tutorial:

Change (own fork): https://github.com/nzamani/openui5/tree/ui5con2016-pdfviewer-explored-tutorial

Or browse my fork: https://github.com/nzamani/openui5

www.nabisoft.com 60

Thank You

Check our UI5 tutorials:https://www.nabisoft.com/tutorials/sapui5/

Contact us:https://www.nabisoft.com/contact

Share your experience & create Pull Requests on GitHub