CIT Focus

Get in contact

How to start setting up a UI5 app?

How to start developing a UI5 app?

There are a few opportunities to start with talking about setting up a UI5 application. 

We like the template ideas from SAP and their way to provide templates via the “Template Wizard“. That’s a good starting point and SAP is taking care about maintaining always newest stuff inside their templates.

We also do share our CIT template for UI5 apps and some thoughts on why we do recommend our template for beginners:

  • It has “our” own approuter inside
  • There is a gitlab and a github pipeline as example existing
  • The webapp folder contains a simple ui5 webapp as dummy, showing us a list with entries from our (local) model
  • It’s using ui5-tooling. The best way to start for new (and experienced) UI5 developers! Check out this great post to get more background knowledge about it.
If you’re following our recommendation using our template, you can fork / copy the content into your own github / gitlab repository and continue!

Some first words about this template app

There are tons of blog out there on the web and on the SAP Community, telling and coaching you through UI5 and beginner guides or tutorials exist too. So I can recommend to click on these hyperlinks checking out what’s already there and how to get more UI5 knowledge. But I want to highlight one thing:
Do not waste your time yet and do not check out the approuter (this module is routing requests from your app to different targets – it routes. That’s it for now!) details and npm behaviours at this initial time of your first app.

Get your hands dirty - Start with BAS

It’s good to start with Business Application Studio (BAS) as your IDE as it has a lot of features and tools already on board preinstalled. You can select the different tools on your own within a space setup.

Create your dev space with Fiori capabilities and give it a name before you click “Create Dev Space”

Press the button “Clone Repository” and enter the URL of your fresh created repository.

Select folder “projects” within the “open popup window” and click on “open” on the appearing message on the bottom. Open a “Terminal” > “New Terminal” session and enter the dummyUI5 folder (“cd dummyUI5”).

Type into your terminal “npm install”. 

Your BAS IDE is now loading necessary dependencies of ui5-tooling (and other modules) for you and stores them inside the (new) folder “node_modules”. This folder will stick on your IDE and will not be (up-)loaded into the repository. This is “configured” in the “.gitignore” file (just if you’re interested open this file, it’s distraction again).

Continue after the npm install part with “ui5 serve”.
Let the magic happen …

Click on “Expose and Open”, press enter (ignore the upcoming input field) and click on “index.html” file at the new window.

Okay, it’s running locally on your IDE. Nice! Good job!

Keep the new window open and go back to the BAS.
Open the corresponding model file “dummyUI5/webapp/models/apps.json” and change or add something.
The website will reload automatically (due to some magic ui5-tooling things we will check later).

Check up the “dummyUI5/webapp/views/view.xml” file. You will identify the way how it’s related to each other via bindings.
Now it’s time for you to investigate about these binding things and get more background knowledge.

 

Next steps

Your next step could be setting up a CI/CD pipeline to check on your own devOps strategy. Therefore we provide some cool out-of-the-box pipelines for you. Check them out here.

How to start setting up a UI5 app?
Scroll to top