25 May, 2022
Blog
By Anders Svensson
In our previous article Par1 of this series, we presented the Agama AWE SDK, the requirements needed to create a simple application to provide real use for Agama customers and the configuration of the project.
In the second part of the series, we're diving into how to create the layout and styling, and also elaborate on the application logic.
We have created a boilerplate application and defined the configuration parameters that shall be possible for the users to adapt. It is now time to start creating the actual functionality of the application. An important part of that is the actual layout and structure of the presentation, which for these applications is controlled by standard HTML, CSS, and JavaScript. In the application index.html below, we have modified the boilerplate HTML structure and instead defined a set of div:s used as placeholders for the configured test name and a div for the status indicator.
The ADE will automatically update the UI while editing and saving HTML so the structural changes will be shown immediately. The result is not interesting right now as we have not yet populated the div:s with any content and styling, so the result is still just an empty screen.
The Application logic To start populating the application with the configured content, test logic and the test status results, we need to start adding JavaScript code.
The main application entry point that is called by the Agama application framework is the onUpdate function. This function has two parameters, state and reason. The state parameter is an object that contains the configuration of the application. So, all the parameters that we defined in the JSON returned in the onConfiguration function, will be available in this object. The reason parameter is an integer stating why the function is being called; it allows us to implement different handling and behavior depending on this. In our application we must handle the create and configuration change reason. In the code above one can see how easily and obviously we can access and use the different configuration parameters that we have defined.
The program logic needed to implement the functionality is quite simple. When the application is created, we set up a timer that ensures that our test function update() is called at the user configured interval. The update() function in turn calls the defined REST API and checks the result codes against the configured, and depending on the result adding either a fail or ok CSS class to the status div.
The current result is now as above. We can now see the defined test name, in this case VoD system (which is the name we configured) but we do not see any status symbol. That is correct and it is because we have not yet added the styling for the status div.
Styling Adding CSS styling for the application is the last step in getting the applications appearance and functionality in-place. We use the automatically created file css/style.css and add the following.
It is here where we define the fail to indicate with an orange background, and ok to indicate with a green background.
Yes, now it looks more promising!
Most recent headlines
05/01/2027
Worlds first 802.15.4ab-UWB chip verified by Calterah and Rohde & Schwarz to be ...
04/08/2026
Dalet, a leading technology and service provider for media-rich organizations, t...
04/07/2026
April 7 2026, 19:00 (PDT) Detective Conan: Fallen Angel of the Highway Opens in...
01/06/2026
January 6 2026, 05:30 (PST) Dolby Sets the New Standard for Premium Entertainment at CES 2026
Throughout the week, Dolby brings to life the latest innovatio...
18/05/2026
Despite a bumpy start to the year, the provider of event-production support and ...
18/05/2026
Daktronics has partnered with the University of North Carolina to manufacture and install 11 LED displays totaling more than 10,000 square feet and more than 14...
18/05/2026
CBS LA has announced a multi-year partnership with the Los Angeles Rams, covering exclusive local broadcasts of Rams preseason games, weekly year-round programm...
18/05/2026
Skyline Communications has announced an integration between its DataMiner xOps p...
18/05/2026
eCLUTCH, the hybrid esports platform powered by iKOMG, has announced an expansion of its distribution across Europe, MENA, Africa, and Asia, along with new cont...
18/05/2026
Behind The Mic provides a roundup of recent news regarding on-air talent, includ...
18/05/2026
With 22 games this season, the production team looks forward to tweaking and enhancing the coverage
After 8,660 days off the air, the WNBA returned to NBC yest...
18/05/2026
(L-R) Midori Francis and Natalie Erika James attend the Saccharine premiere during the 2026 Sundance Film Festival at The Ray Theatre on January 22, 2026, in ...
18/05/2026
Last night, the Spotify Podcast Awards in Mexico returned to the country's capital. Now in its second year, the evening honors creators whose voices are hel...
18/05/2026
ZEN-Core synth goes mobile
Roland's powerful ZEN-Core software synthesizer has just been introduced to the iPad, offering a convenient entry point into ...
18/05/2026
Versatile new limiter plug-in announced
Based in Sheffield, UK, fedDSP offer a range of plug-ins that span the music production, live sound and high-end med...
18/05/2026
A new use for convolution?
Viiri Audio's debut plug-in aims to do something a little different with convolution processing, allowing users to adjust all...
18/05/2026
Delta Goodrem shines for SBS as more than 3.27 million Australians tune in for E...
18/05/2026
The Australian Defence Force uses L3Harris T4 and T7 robots for explosive ordnan...
18/05/2026
Continued investment across Europe and Germany is expanding local teams and improving access to stock, regional expertise, and specialist broadcast support.
CV...
18/05/2026
18 May 2026
Dubai and New York, May 18, 2026 - VEON Ltd. (NASDAQ: VEON), a glob...
18/05/2026
Monday 18 May 2026
Sky News offers ad-free podcasts and bonus episodes for just...
18/05/2026
Comscore March 2026 Consumer AI Chatbot Usage Rankings Show Claude Gaining Share OpenAI's ChatGPT maintains lead while Anthropic's Claude continues to c...
17/05/2026
Delta Goodrem's Eurovision Eclipse marks end of a stellar run
17 May, 2026
Media releases
Bulgaria wins Eurovision 2026
Relive every spellbinding mome...
17/05/2026
Back to All News
Oasis Premieres on Netflix June 19
Entertainment
17 May 2026
GlobalSpain
Link copied to clipboard
Summer, sunshine, the beach, parties. T...
16/05/2026
Helps to deliver a clean, balanced midrange
Developed alongside Newfangled Audio, the latest plug-in in Eventide's software collection has been designed...
16/05/2026
Brings onboard stem rendering to RANE System One
Engine DJ have just released Engine DJ 5.0, a free update for their Engine DJ OS embedded hardware and Engi...
16/05/2026
Boris FX Continuum Pairs AI Precision and Advanced Creative Controls
Jessie Electa Petrov May 16, 2026
0 Comments
The 2026.5 release adds automatic de...
16/05/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
16/05/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
16/05/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
16/05/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
15/05/2026
Seattle Sounders FC and Seattle Reign FC, in partnership with RAVE Foundation an...
15/05/2026
Dan Brumm has served as sound designer on Bluey, the Australian children's t...
15/05/2026
The Professional Audio Manufacturers Alliance (PAMA) and Shure Incorporated are accepting applications for the 6th annual Mark Brunner Professional Audio Schola...
15/05/2026
Netflix has announced an expanded NFL schedule for 2026 and beyond under a four-year partnership extension with the NFL through the 2029-30 season. Each season,...
15/05/2026
Ateme is supporting TVRI (Televisi Republik Indonesia) with a contribution and d...
15/05/2026
Concacaf has announced the launch of a new website and mobile app built on Deltatre's FORGE platform. Concacaf.com and the mobile app, available on iOS and ...
15/05/2026
Eutelsat has announced the launch of QBC Business Economic Channel by Qatar Media Corporation, broadcasting in 4K/UHD via Eutelsat's 7/8 West video neighbo...
15/05/2026
Major League Soccer has announced four original content series timed to the 2026...
15/05/2026
The Alliance for IP Media Solutions (AIMS) has announced it will exhibit and present at InfoComm 2026, taking place June 13-19 at the Las Vegas Convention Cente...
15/05/2026
InfoComm 2026 will take place June 13-19 (exhibits June 17-19) at the Las Vegas Convention Center. The show will include sessions and exhibits covering broadcas...
15/05/2026
Tracy McGrady's Ones Basketball League (OBL) and FuboTV Inc. have announced ...
15/05/2026
Disguise has partnered with Creative Technology (CT) to deliver visual playback ...
15/05/2026
Sony Electronics has announced two new products for professional imaging: the Alpha 7R VI full-frame mirrorless camera and the FE 100-400mm F4.5 GM OSS super-te...
15/05/2026
In-venue and creative video staffers at the professional and collegiate level ha...
15/05/2026
Ratings Roundup is a rundown of recent rating news and is derived from press rel...
15/05/2026
For sports organizations, the most valuable assets are often the most sensitive:...
15/05/2026
The NFL's broadcast partners released their 2026 regular season schedules ye...
15/05/2026
Besides drawing on experience with boxing, the production integrates specialty c...
25 May, 2022
