Skip to Content
Author's profile photo Karan Bahl

Leveraging SAPUI5 for Building Dashboard like Apps | Entry for UI5 Top 5 Competition

Hi all,

 

After the announcement on the blog https://blogs.sap.com/2017/12/22/new-search-for-a-new-ui5-top-5-2018/ inviting design for Top SAPUI5 Applications; we decided to leverage SAPUI5 to build a custom application in SAPUI5 not based on any template; but rather our own dashboard like application which collates information from disparate sources.

We all usually see applications in the standard Master-Detail or Full Screen templates which are very common in the SAPUI5 and Fiori scheme of things.

We decided to digress from the standard templates and tried to come up with our own Dashboard like Apps which are not only interesting and intuitive; but also offer a great integrating platform for data from different sources and styles.

We have made this app called 360 Degree Dashboard which captures data from different sources and gives an analytical view to the end user. The user can also filter data dynamically as per the filters.

We have also integrated third party libraries such as Mcharts, Google Maps etc. for our application. Also, we have built an interesting Poll feature in our app.

Thus, We have utilized the strong SAPUI5 framework to build this intuitive application and deployed it on SAP Cloud Platform; and created a fiori site for its access. You can access the site using the URL for those who want to see it live:

https://flpportal-p1942326342trial.dispatcher.hanatrial.ondemand.com/sites/digidash#dashboard3602-Display

 

Here are a few screenshots from the application:

 

 

Comments and Feedback are most welcome.

 

Thanks,

Karan Bahl

 

 

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Hi Karan,

      Is the link just a piece of your program?   Because I can see some issues with it if it is supposed to be the entire program. Some things aren't working.

      Looking at the pictures on the blog - it looks like a very nice project.

      Thank you for sharing,

      Michelle

      Author's profile photo Karan Bahl
      Karan Bahl
      Blog Post Author

      Hi Michelle,

       

      Thanks for pointing out. It was some issue with the loading of libraries. We have fixed it now, You should be able to see the full site now.

       

      Regards,

      Karan

      Author's profile photo Michelle Crapo
      Michelle Crapo

      Thank you! It looks good.  I can't flip back and forth between regional and global.  But it looks very nice!

      Thank you!

      Michelle

      Author's profile photo Moya Watson
      Moya Watson

       

      That spinning Apple 🙂

       

      Thanks for the share Karan!

      Author's profile photo Aris van Mazijk
      Aris van Mazijk

      Looks very good Karan. However, I also experienced some difficulties between switching between regional and global. It even made the chart flip into a donut 🙂

      Author's profile photo Bilen Cekic
      Bilen Cekic

      Cool charts! You might play with colors a bit 🙂 they are very strong, i also had a mock design as below i might publish as well. Due to some company names i had the blur texts.

      Author's profile photo Ricardo Varela
      Ricardo Varela

      did you use viz charts for this?

      Author's profile photo Bilen Cekic
      Bilen Cekic

      no viz chart is terrible

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      well done, looks very nice... just wondering why you used MCharts rather than... the viz charts? was there anything in particular that drove the decision?

      Author's profile photo Karan Shaheri
      Karan Shaheri

      Hi Karan,

      360 Degree Dashboard looks really good. Spinning apple is awesome. Good to see all the things at the same place. Download option on charts is also great.

      Regards,

      Karan Shaheri.

      Author's profile photo Former Member
      Former Member

       

      Hi Karan ,

      Nice work , can you share your source code pleas ?

      Many thanks in advance

      Author's profile photo alisha baweja
      alisha baweja

      Hi Karan,

      Thanks for an edifying blog.The charts are really cool.

       

      Thanks

      Alisha

      Author's profile photo Karan Bahl
      Karan Bahl
      Blog Post Author

      Thanks Alisha!

      Author's profile photo Pravesh Shukla
      Pravesh Shukla

      Hi Karan,

      Really Good Work! Awesome UI experience.

       

      Regards,

      Pravesh Shukla

      Author's profile photo Karan Bahl
      Karan Bahl
      Blog Post Author

      Thanks Pravesh!

      Author's profile photo S. Jain
      S. Jain

      Hi Karan,

       

      Liked it. Very nice UI. It must have taken real hard work to do it in ui5. Please share code.

       

      Regards,

      S.Jain

      Author's profile photo Ankit Kansal
      Ankit Kansal

      Simply Awesome! Appreciate the good work Karan.

      Author's profile photo Karan Bahl
      Karan Bahl
      Blog Post Author

      Thanks Ankit!!