Skip to Content
Author's profile photo Former Member

The SAPUI5 Suicide Squad!

Suicide Squad was released worldwide last week and being a long-time fan I decided to celebrate it over the weekend by building an app to introduce the suicide squad. I needed a simple app to create the list of characters and some details. What’s better than the trusted SAPUI5 Master Details template. I prepared all the character elements – Their description, cast in the movie, their skills and when they first appeared in the DC universe. The next step was to design the UI Elements including Icons for each character and their skills and some retouching of the character and cast photos generally available on the Internet.


     1.    With this ready, I prepared the JSON Model which had all this data.

                    SSblog1.png

     2.     Create the app using the standard SplitApp( Master Details)

                    SSblog2.png

3.     Next step is to Populate the Master Page with sap.m.List from JSON Data with Name and Icon

                    SSblog3.png

                Get the Details Page populated with Element Binding. Element binding allows to bind elements to a specific object in the model data, which will create a binding context and allow relative binding within the control and all of its children.


It will be hard to imagine that suicide squad will be using the SAP Themes like Blue Crystal or Belize so went about creating my own theme based on the movie theme. That needed some tweaking around on the CSS side.

     4.     Get the CSS class of the specific object or control and use own CSS, as follows for the scrollbar and the font.

                            SSblog4.png

               Before Custom CSS –

                         SSblog5.png

                          

                After Custom CSS  (Background, Theme color, Font)

                         SSblog6.png

          

There you go we now have the Suicide Squad info in SAPUI5! Put your headphones on for the best experience. Office workers – Don’t worry music will not play unless you press the play button.

Live demo –   www.chandankalita.com/demo/SapUI5/SS_MD/

Hope you enjoyed the suicide squad on SAPUI5. Thinking of bringing more superheroes across different universes to SAPUI5 in the future.

Feel free to comment if you have any suggestions!

Any ideas on improving the code or flow also welcome!

Edit – check out this new custom App here – Custom EPL UI5 App!

Assigned tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vladimir Erakovic
      Vladimir Erakovic

      Awesome, I like it! 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you, Vladimir Erakovic

      Author's profile photo Former Member
      Former Member

      Great! You used simple controls to create a good Application ! Bravo Man!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, Vinayak Khosla

      Author's profile photo Karthik A
      Karthik A

      Simply awasome

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, Karthik A

      Author's profile photo Christopher Solomon
      Christopher Solomon

      Great job! When you come up with a project based around something you love, it does not feel like work at all!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, Christopher Solomon

      " it does not feel like work at all!" well said, Looking for something next weekend too 😉

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      this is an awesome custom UI - seems like you invested good time in it and it paid off. congrats and thank you very much for sharing!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Sergio Guerrero,

      it's my pleasure, and thank you.

      Author's profile photo Raphael Pacheco
      Raphael Pacheco

      Great job indeed !

      Congrats and thanks for show to us your art 😉

      Author's profile photo saurabh vakil
      saurabh vakil

      Awesome!!!

      Thanks for sharing this!

      Author's profile photo Former Member
      Former Member

      Very nice work .. Particularly the pause and play music buttons .. so you can play it only when you need it 😀 --

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi,

      Thanks all for your comments, which encouraged me for this - Custom EPL UI5 App!

      Regards,

      Chandan