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.

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

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

                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.

               Before Custom CSS –

                After Custom CSS  (Background, Theme color, Font)

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!