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...
05/06/2026
Hitachi and Intel announced a strategic collaboration to explore opportunities t...
05/06/2026
MRI-Simmons and S&P Global Mobility are expanding advanced audience capabilities...
05/06/2026
New Nielsen data shows insurance ad spend grew 11%, while consumers remain highl...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
ASG Promotes Joe Marchitto to Western Regional CTO
Brie Clayton June 5, 2026
0 Comments
Appointment to Support Engineering Alignment and Client Experi...
05/06/2026
Stargate Studios Colombia Uses DaVinci Resolve Studio for Vertical Microdramas
Brie Clayton June 5, 2026
0 Comments
End to end post in one platform al...
05/06/2026
People Need to Come First When We Use AI
Andy Marken June 5, 2026
0 Comments
It's just surviving. Life's very existence requires destruction....
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
05/06/2026
Frequency, the engine powering many of the world's leading streaming television channels, today announced the launch of In-Scene Advertising, a new monetiza...
05/06/2026
Berklee Study Reveals Video Has Become Essential to Music Careers Survey findings show social platforms have become the primary source of music for video cont...
05/06/2026
RT Radio 1 Folk Awards to take place on Tuesday 10th November 2026, Vicar Street, Dublin
Moya Brennan, D nal Lunny, Mary Black and Christy Moore among previou...
04/06/2026
Sony Electronics is introducing the SRG-AS10, a 4K 60p-compatible PTZ auto-frami...
04/06/2026
This recent grad from Spring, TX, led creative-video output for the Aggies' men's basketball team last season and has been producing video and creating ...
04/06/2026
For the first time at a women's golf major, every player in the field will r...
04/06/2026
Three Panasonic PT-RQ45 40,000-lumen 3-Chip DLP projectors made their first live...
04/06/2026
Bitmovin and Akamai have announced a collaboration with NRJ Group, a French mult...
04/06/2026
Telestream will exhibit at InfoComm 2026 (Booth N7952), demonstrating media work...
04/06/2026
Sony has announced the development of RIALTO 65, a 65mm format image sensor block for the VENICE 2 digital cinema camera, targeting release in the first half of...
04/06/2026
KOKUSAI DENKI Electric America will exhibit at InfoComm 2026 (Booth N8025, June ...
04/06/2026
Bell Media's TSN and RDS are the exclusive Canadian broadcasters of FIFA Wor...
04/06/2026
The Challenge: Receiving Heavy Media Files From Road Games Quickly and ReliablyT...
04/06/2026
MASV, a managed file transfer platform used in broadcast and live sports product...
04/06/2026
NESN has announced the appointment of Fahad Haider as Vice President of Operations and Engineering. Haider returns to NESN, where he previously served as Vice P...
04/06/2026
David J. Halberstam, who spent almost 50 years in sports as a broadcaster and an executive, died June 2 after a years-long battle with brain cancer.
Over his l...
04/06/2026
Although collegiate production programs are tasked with delivering high-quality ...
04/06/2026
California studio, two production trucks, global distribution system are combine...
04/06/2026
New global program empowers and supports storytellers through scriptwriting course and access to industry experts
TikTok and Sundance Institute today announce...
04/06/2026
Steinberg DAWs now boast in-depth Tonalic integration
Celemony's innovative virtual session musician plug-in has just received an update that brings ARA...
04/06/2026
Get Hands-On With Over 20 Mic Brands
GearExpo UK is fast approaching, and if you've been looking for a chance to check out some new mics, then you'r...
04/06/2026
Combos feature new Amplifier Intelligence engine
Positive Grid's latest release sees the company introduce two new combo amplifiers that promise to offe...
04/06/2026
Is Your Job Making You Work this June?
4 June, 2026
Media releases
SBS Launches the World Cup Watchers' Rights Association to Stand Up For Australians&...
04/06/2026
Statement regarding unauthorised use of SBS logos on third party social content
4 June, 2026
Media releases
SBS has become aware of social media posts in c...
04/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
04/06/2026
Bitmovin, a leading provider of video streaming infrastructure, and Akamai, the cybersecurity and cloud computing company that powers and protects business onli...
04/06/2026
American Underground (AU), the Startup Hub of the South and a community of mor...
04/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
04/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
04/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
25 May, 2022
