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 ...
06/09/2026
June 9 2026, 23:00 (PDT) Dolby and MagentaTV Bring Fans Closer to the FIFA Worl...
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...
10/06/2026
DAZN-owned digital-media company launches three fan-first series leaning into cr...
10/06/2026
Clear-Com has announced the appointment of Jason Dino as Southwest Regional Sales Manager USA, covering Southern California and the Southwest region. Dino joins...
10/06/2026
An 11% decrease in number of global broadcast deals reflects the organization...
10/06/2026
The Women Without Boundaries Awards recognize women whose work is advancing the future of media, broadcast, AV, workplace technology, digital experience, and re...
10/06/2026
Today is match day minus two for FIFA and HBS. On Thursday, there will be two ma...
10/06/2026
SES is supporting broadcast distribution of the world's biggest football tou...
10/06/2026
NDI has announced that BirdDog has become the first hardware manufacturer to achieve full NDI 6.3 compatibility across its complete lineup of cameras, encoders,...
10/06/2026
Vince Caputo and Scott Carter, winners of the 2026 Sports Emmy for Outstanding Post Produced Audio have been announced as presenters for the 2026 SVG Advanced A...
10/06/2026
FOX One today unveiled a slate of new product features and enhancements designed to elevate the viewing experience for fans on the official streaming platform o...
10/06/2026
Primary production partners Dome Productions and Raycom Sports once again played...
10/06/2026
The Women in Sports Filmmaking Experienceship is an immersive professional devel...
10/06/2026
The league has expanded its HSAN architecture for the NBA Finals to manage more ...
10/06/2026
The inaugural MoonPay X Games League (XGL) Winter Draft will take place Wednesday, September 16, 2026 at Cosm Los Angeles from 7-9 p.m. PT. The event will strea...
10/06/2026
The University of Oklahoma (OU) Athletics Department and Learfield have announce...
10/06/2026
The Video Services Forum (VSF) has released TR-06-4 Part 8, a new specification for RIST Satellite-Hybrid: Out-of-Band Method. The specification creates a mecha...
10/06/2026
Riedel Communications provided the communications infrastructure for the 14th World Live Neurovascular Conference (WLNC) in Lisbon, supporting live medical proc...
10/06/2026
A still from The Doom Generation by Gregg Araki (Courtesy of Sundance Institute)
By Lucy Spicer
Have you checked out our Sundance Film Festival 101 list yet...
10/06/2026
Get Hands-On with Interfaces & Mic Preamp Brands
If youre after a new interface or preamp, then GearExpo UK is the place to be! Well have a whole host of au...
10/06/2026
November 13-14 2026, The Midway, San Francisco
Following their recent rebranding, MONO Music Conference (formerly Music Expo) have officially announced thei...
10/06/2026
Debut instrument free for limited time
deFORM is the debut release from newly founded developer ebbandflow, and it's being offered as a free download fo...
10/06/2026
Alone Australia Season 4: Meet the Cast
10 June, 2026
Media releases
WATCH THE TRAILER
Smash-hit survival series Alone Australia drops its highly anticipa...
10/06/2026
DEADLY THEN, DEADLY NOW, DEADLY ALWAYS: SBS & NITV IGNITE NAIDOC WEEK 2026 WITH ...
10/06/2026
Rohde & Schwarz and TRUMPF advance laser-based drone defense with THORIS LCS Rohde & Schwarz is showcasing THORIS at ILA 2026: A sovereign, end to end counter...
10/06/2026
MAHLE and Rohde & Schwarz develop application for sensor testing of modern drive...
10/06/2026
Production and Development Funding supports the creation of compelling, commercially viable, artistic and culturally relevant South African screen content. Deve...
10/06/2026
Media buyers and sellers can now compare YouTube reach from computer, mobile, an...
10/06/2026
Accedo, Humans not Robots, and the Institution of Engineering and Technology (IET) have announced the launch of Ecoflow X. Formerly an IBC Accelerator project, ...
10/06/2026
Frequency, the engine powering the world's leading streaming television channels, today announced that James Smith has joined the company as General Manager...
10/06/2026
At the 14th World Live Neurovascular Conference (WLNC) in Lisbon, Riedel Communications provided the communications infrastructure for live medical procedures s...
10/06/2026
Globecast, a leading provider of broadcast, media, and entertainment managed services, today announced the launch of its Content Exchange platform powered by Or...
10/06/2026
Klvr will showcase how venues, integrators and production teams are rethinking disposable battery usage at InfoComm 2026 (Las Vegas, June 17-19, booth #N6311). ...
10/06/2026
The Video Services Forum (VSF) has further enhanced the Reliable Internet Streaming Transport (RIST) protocol by incorporating a new feature, RIST Satellite-Hyb...
10/06/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
10/06/2026
10 Jun 2026
VEON's Banglalink Brings Every World Cup 2026 Match to Football...
10/06/2026
Wednesday 10 June 2026
How to watch every ICC Women's T20 World Cup 2026 match live on Sky Sports
Where is the ICC Women's T20 World Cup 2026 availabl...
10/06/2026
Wednesday 10 June 2026
P RLA brings first-ever Beautifully Clean Oral Care'...
10/06/2026
Wednesday 10 June 2026
Sky reveals pulse-pounding first teaser trailer for upco...
10/06/2026
Wuppertal June 10, 2026
Riedel Artist at the Heart of the 14th World Live Neurovascular ConferenceAt the 14th World Live Neurovascular Conference (WLNC) in Li...
10/06/2026
Back to All News
Netflix Showcases New Mobile Experience, Collections and Games Vision in APAC
Product
10 June 2026
GlobalSouth KoreaJapan
Link copied to c...
10/06/2026
Back to All News
Ready to Join? The Netflix Fan Club Arrives at Cannes Lions
Business
10 June 2026
Global
Link copied to clipboard
Download all assets
N...
10/06/2026
Chemists snap together complex 3D molecules from highly reactive radicals-without losing their shape Scripps Research team develops stereoretentive radical-radi...
09/06/2026
Kiswe announces an expanded long-term partnership with ONE Championship (ONE), t...
09/06/2026
SiriusXM will broadcast FOX Sports' English-language commentary for all 104 FIFA World Cup 2026 matches from June 11 through July 19, available to subscribe...
09/06/2026
EVS has announced it is changing its corporate name from EVS Broadcast Equipment to EVS, reflecting the company's expanded portfolio beyond broadcast equipm...
09/06/2026
Fox Corporation and the NFL have announced a multi-year agreement to bring NFL c...
25 May, 2022
