Building UI Modules & Widget

Building UI Modules & Widget

Objectives


  1. Get more familiar with creating UI modules using SOAJS and AngularJs

  2. Get more familiar with creating a widget using SOAJS and AngularJs









Create Pet Store UI module 


This UI module is found under Operate pillar in the Dashboard.

It lists the pets available in the store and give you the ability to manage this store using the API created here.

To learn how it is created, click here.

You can check the code here.





Create Orders UI module 


This UI module is found under Operate pillar in the Dashboard.

It lists the orders from all the clients, so the admin can confirm or reject an order. He can also filter the orders.

To learn how it is created, click here.

You can check the code here.





Create the Widget 


The widget is the frontend SDK where you use your APIs to have a functional website.

This widget is based on JavaScript, AngularJs, bootstrap and jQuery. It's a commercial widget unlike the Dashboard that's a management SDK.

The difference between the Dashboard SDK and the widget is mainly the theme. Unlike the widget, we find in the Dashboard a left menu related to the pillar clicked in the header.

Note that the widget could be written in any language and still benefit from urac, oauth and all the security provided by SOAJS.

You can check the code here.