The Explored App has become an essential source of easy to reuse code. But how can it be extended with own examples, i.e. for sharing with colleagues or with the community? In this talk we will hack the Explored App and see how to add own snippets that illustrate our own showcases.
5. 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
6. 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
15. 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
17. 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
19. 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
21. 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
22. 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
25. 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
27. 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
28. 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
29. 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
30. 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 the
Component. This file is loaded by the Explored App.
32. 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
42. 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
43. 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…
47. 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
48. 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):
49. 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
50. 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
51. 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
52. 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
53. 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
54. 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
55. 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
59. 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
60. 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