
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...
02/05/2026
Dalet, a leading technology and service provider for media-rich organizations, t...
01/05/2026
January 5 2026, 18:30 (PST) NBCUniversal's Peacock to Be First Streamer to ...
20/04/2026
At the 2026 NAB Show, Sony is showcasing a broad slate of innovations across liv...
20/04/2026
At the 2026 NAB Show, Canon is doubling down on its commitment to live sports pr...
20/04/2026
Fujifilm is sharpening its focus on core broadcast production with a new wave of...
20/04/2026
This upcoming summer in North America is going to be a busy one. The 2026 FIFA M...
20/04/2026
Glookast (Booth W1661) announced a series of product updates at NAB Show 2026, c...
20/04/2026
Matrox Video and Amagi announced a collaboration to integrate the Matrox ORIGIN ...
20/04/2026
Riedel Communications (Booth C4908) announced that the Asociaci n del F tbol Arg...
20/04/2026
Ikegami (Booth C3819) announced the VFE-P07D monocular OLED viewfinder at NAB Sh...
20/04/2026
International Association of MediaTech (IAMT), formerly known as IABM, announced...
20/04/2026
Harmonic (Booth W2831) announced that DIRECTV is updating its US direct-to-home (DTH) video platform using Harmonic's VOS Media Software.
The deployment is...
20/04/2026
Wasabi Technologies announced that it has acquired the Lyve Cloud business from Seagate Technology. As part of the agreement, Seagate received equity in Wasabi ...
20/04/2026
EVS (Booth N1841) has launched Choreon, a robotics controller for media producti...
20/04/2026
The NAB Show is in full swing, and the SVG and SVG Europe editorial teams are chasing down the hottest stories from all over the Las Vegas Convention Center. He...
20/04/2026
Skyline Communications announced the availability of its DataMiner xOps platform...
20/04/2026
Studio Network Solutions (Booth N1129) introduced a set of new products at NAB S...
20/04/2026
Dell Technologies is showcasing its Dell AI Data Platform with NVIDIA at NAB Sho...
20/04/2026
Blackmagic Design has announced Fairlight Live, a software-based live audio mixer with SMPTE 2110 support and spatial audio mixing. A public beta is available n...
20/04/2026
At the 2026 NAB Show in Las Vegas, Imagine Communications VP of Sales, Sports an...
20/04/2026
At the 2026 NAB Show in Las Vegas, LiveU Senior Director of Sales, Sports Philli...
20/04/2026
A song that perfectly captures a moment is magic. But when you uncover the story behind it, who made it, what inspired it, and the meaning woven into the lyrics...
20/04/2026
Ultra-compact 32-bit recorder set for launch
Deity Microphones will soon be launching a new 32-bit six-track recorder that's been designed with producti...
20/04/2026
Uncoming lightweight shotgun mic announced
Production-sound experts Lectrosonics have recently announced the upcoming launch of a new lightweight shotgun mi...
20/04/2026
New 20-minute documentary explores iconic preamp
In 2025, Focusrite commissioned a new short-form documentary with filmmaker Chris Mayes-Wright - the direct...
20/04/2026
Turn quick sketches into real drum grooves
Sampleson have been experimenting with assitive production tools recently, and their latest creation aims to make...
20/04/2026
Rohde & Schwarz rolls out its full ARDRONIS counter UAS suite in a demonstration...
20/04/2026
L3Harris delivers integrated communications, navigation and C4ISR capabilities that empower the U.S. Coast Guard to protect Americas maritime interests and resp...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
CueScript and Lighting Design Group Expand Customer Opportunities
Through New Partnership
Find both companies at 2026 NAB Show in CueScript Booth # C 4720
...
20/04/2026
[Sydney, NSW, 20 April 2026] - Layercake, the company behind the intelligent media orchestration platform Streamcake, today announced the formalisation of its i...
20/04/2026
Deployment spans FOX Sports' REMI infrastructure, IP production for a major global soccer event, and its Jewel Events production systems
Appear, a global l...
20/04/2026
Pro Sound Effects Launches the Industry's First and Only Native Sound Effect...
20/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
20/04/2026
Blackmagic Design Announces Blackmagic Camera for iOS 3.3 Update
Brie Clayton April 20, 2026
0 Comments
New update adds camera control and monitoring ...
20/04/2026
Maxon Announces Free Tools and Mobile Expansion of ZBrush and Cinema 4D
Brie Clayton April 20, 2026
0 Comments
Cinema 4D brings professional 3D workfl...
20/04/2026
Vizrt AI Keyer kills the green screen and creates virtual scenes in any environm...
20/04/2026
Register now - Market & Audience Department Ask Me Anything (AMA) Session 11 February 2026
Screen Australia Head of Market & Audience Rakel Tansley
Talking to...