Programming

Learn SAPUI5: Controls, Aggregations, Associations, and Event Handlers

The mobile era is in full swing. Everywhere you turn these days you’ll find people on their devices, whether they are phones, tablets, or the latest augmented reality technology.

 

Employees, too, are plugged in as they perform their tasks. New orders come in over tablet on the shop floor. Marketing hands off qualified leads to the sales team via CRM. Slack…Skype…SAP Jam. The point is: people are always plugged in to shopping, working, reading, studying, watching.

 

Which is why if your business isn’t taking advantage of mobile, you’re sorely missing out. Just as you need a robust social media plan to engage with consumers on an entertainment and sales level, you need a way for those fans to interact with you via a platform that is all your own. And wouldn’t it be nice to make your employees’ lives easier by giving them the tools they need in one easy-to-access place?

 

Two great ways to complete these tasks are via a mobile-optimized website and an app.

 

Responsive Design

Websites can be coded to be responsive in design, making them very mobile-friendly. Simple, plug-and-play webhosts like WordPress know how to automatically change your content around so it looks nice on both a laptop and a mobile device. Which is great for those on a budget or who don’t know how to code.

 

But when it comes to mobile apps, that’s another story. One size doesn’t fit all in this case, so some development work will need to be done to make your customers or employees happy. This can be an expensive and time-consuming process, spending thousands of dollars on a developer or learning to code yourself.

 

No matter which path you find yourself on—a developer contracted for a project or a DIY coder going it alone—you can use tools like SAPUI5 libraries to work on creating your app.

 

Key Terms

From what I can tell, coding isn’t as mysterious as one would think. Certainly it takes a lot of effort, but once you realize what all those commas and colons and other foreign symbols are doing, it’ll make a lot more sense.

 

So let’s take a look at four of the more basic “words” in coding: controls, aggregations, associations, and event handlers. These are simple commands that can bring about powerful results. Let’s take a look at each one.

Controls

Controls are the decision-makers in a line of code. They tell the computer what to do whenever a choice has to be made. This can be as simple as loading the app’s UI when it is first opened or much more complex such as telling the app where to go when multiple variables are present and necessary to get the user to the right spot.

 

These more complex controls are what really bring heft to your app. After all, an aesthetically pleasing app without functionality doesn’t do you or your user any good. In order to bring value to both parties, complex controls such as aggregations and associations must be employed.

Aggregations, and Associations

An aggregation is a way for one control (called a parent) to reference another subordinate control (called a child). Just like any family unit, the parent and child do things together. This also means that, when the parent control is no longer necessary and is destroyed, the child control is removed as well. This is a good way to ensure your app isn’t bogged down by unnecessary lines of code. Efficiency is key to the user experience.

 

Similar to an aggregation, an association is a reference between controls. Unlike an aggregation, however, an association allows the child control to become an independent entity that is no longer tied to the fate of the parent control. Paul Modderman, Christiane Goebels, Denise Nepraunig, and Thilo Seidel, authors of our book SAPUI5: The Comprehensive Guide, provide the perfect example of an association as it pertains to a scenario of a poll being conducted on your site. Here is what they have to say:

“Let’s assume that the example app is a poll to determine which logo is more beautiful. After the user has chosen his or her favorite, we want to hide the RadioButtonGroup and then show the overall result of the poll. We’ll display this information with a different control, but the label will remain the same. Hence, it will have to be associated with the next control it labels as well.” (p. 107)

Event Handlers

If controls are the decision-makers of a code, then event handlers are the enforcers. These functions can be assigned to any control; when users tell the app to do something, a control is triggered and the event handlers make sure the control is executed. It’s as simple as that.

 

Conclusion

Neither controls and their peripherals, nor event handlers, would do much good without the other. As you can see, they constitute much of the base of any good app, which is why it’s important to know what they are and how they interplay with each other.

 

I certainly learned a lot from Paul, Christiane, Denise, and Thilo as I read their descriptions of controls, aggregations, associations, and event handlers. You can learn about this and more, too, with our SAPUI5 book.

 

Learn more with this set of SAPUI5 coding guidelines and these 15 key SAPUI5 concepts that will take your knowledge even further.

Recommendation

SAPUI5: The Comprehensive Guide
SAPUI5: The Comprehensive Guide

Your comprehensive guide to SAPUI5! From to , get the know-how to develop MVC apps, use OData, create data bindings, debug and test code, and deploy apps. Learn the dos and don’ts of SAPUI5 and everything in between, whether you’re implementing CRUD operations or writing your own controls. See what’s new with SAP Cloud Platform, SAPUI5 support assistant, and more. Your best apps are yet to come.

Learn More
Sean Fesko
by Sean Fesko

Sean Fesko is a senior marketing coordinator at SAP PRESS. A New England native, he is dedicated to writing and sharing the world of SAP with anyone interested. He is a music aficionado, auto racing fan, and freelance photographer in his spare time. Engage with Sean on all things SAP on LinkedIn at https://www.linkedin.com/in/seanfesko/.

Comments