This is a Micro-Frontend written in Angular that can render a collection of configurable widgets in the UI. All the configuration are passed by a simple JSON string or JavaScript Object.

Being a Micro-Frontend, this can be used in any web-application be it Angular, React, Vue or even simple HTML + JS page. An example of its use in a simple HTML page is given in the demo folder.

To use this Micro-Frontend, you need to first import its main.js and style.css files in your index.html file of the application where you want to render the widget collection. In case of non-Angular applications, you need to import the polyfills.js file as well.

<link rel="stylesheet" href="https://ani-json-widget-micro-frontend.surge.sh/styles.css" /> <script src="https://ani-json-widget-micro-frontend.surge.sh/polyfills.js"></script> <script src="https://ani-json-widget-micro-frontend.surge.sh/main.js"></script>

Then use the HTML tag json-widgets with appropriate inputs and outputs to use this.

The JSON Input Structure consists of 2 parts: the requests part(request) and the widgets display configuration part (rows).

• Each row or column can have classes, widgets, or more rows/columns
• Each widget will specify some key-value pairs:
  • widget : Name of the widget type
  • classes : List of classes to be applied to the widget
  • And other configuration parameters related to the specific widget
• The classes will be bootstrap grid classes everywhere

Any string in the format ${{path.to.variable}} will be replaced by the value of that variable from the response of the request.

Note: For arrays, both a[0].b.c and a.0.b.c path notation are supported.

For Example:

In case of single request, the path can be ${{variableName}} and the value will be the variable value from the response of the request.

In case of multiple requests, the path can be ${{0.variableName}} and the value will be the variable value from the response of the first request.

Any string in the format #{{path.to.variable}} will be replaced by the value of that variable from the variables object passed to the HTML tag / Micro-Frontend.

Note: For arrays, both a[0].b.c and a.0.b.c path notation are supported.

If there is variable substitution for any field, then simple JavaScript data manipulation can be done on the values.

For Example:

• 'Total Score : ' + (${{path.to.a.primitive.variable}} || 0)
• #{{path.to.an.array}}.filter(e=>e.isValid).map(e=>e.value)
• ${{data.metrics.0.successRate}} ? ((${{data.metrics.0.successRate}}*100).toFixed(1) + '%')) : 'N/A'
• ${{data.metrics.0.pass}} ? 'Passed: ' + ${{data.metrics.0.pass}} : 'N/A' etc.

If there is variable substitution for any field, then for complex JavaScript data manipulation, we can use JavaScript Arrow functions as a string.

For Example:

• ()=>{let a = ${{path.to.a.primitive.variable}}; return a}
• Sample function to convert time in Millisecond to dynamic unit: ()=>{let varMilliseconds = ${{data.foo.0.timeInMilliseconds}}; if(!varMilliseconds) return'N/A'; let seconds = Number((varMilliseconds / 1000).toFixed(1)); let minutes = Number((varMilliseconds / (1000 * 60)).toFixed(1)); let hours = Number((varMilliseconds / (1000 * 60 * 60)).toFixed(1)); let days = Number((varMilliseconds / (1000 * 60 * 60 * 24)).toFixed(1)); if (seconds < 60) { return seconds + 'Sec'; } else if (minutes < 60) { return minutes + 'Min'; } else if (hours < 24) { return hours + 'Hrs'; } else { return days + 'Days'; } }

{ "request": { "url": "/graphql", "method": "GRAPHQL", "authToken": "${{xyzAuthToken}}", "body": { "query": "query getFoo ($inp: String!) { foo(input:$inp) {fieldName} }", "variables": { "inp": "123" } } }, "rows": { "classes": ["justify-content-center"], "widgets": [ { "widget": "widget-name", "classes": ["col-md-6", "col-sm-12"], "configuration1": "${{data.foo.0.fieldName}}", // Use ${{data.path}} to access the data from the response "configuration2": "#{{externalVariableName}}", // Use #{{path}} to access the data from the variables object passed to the HTML tag / Micro-Frontend "configuration3": "${{data.foo.0.fieldName}}.map(e=>e.value)", // You can use simple JS operation on the dynamic data "configuration4": "()=>{ let a = ${{data.foo.0.fieldName}}; return a.length }" // For any advanced operation on the dynamic data, you can use arrow functions like this } ] } }

{ "request": [ { "url": "https://run.mocky.io/v3/db830bac-3ac3-4d97-ba85-aa13aacf5be5", "method": "GET" }, { "url": "https://api.abc.com/graphql", "method": "GRAPHQL", "authToken": "${{xyzAuthToken}}", "body": [ { "query": "query getFoo ($inp: String!) { foo(input:$inp) {fieldName} }", "variables": { "inp": "123" } }, { "query": "query { metrics { successRate pass } }" } ] } ], "rows": [ { "classes": ["justify-content-center"], "columns": [ { "classes": ["justify-content-center"], "rows": [ { "classes": ["justify-content-center"], "widgets": [ { "widget": "Widget 1" } ] }, { "classes": ["justify-content-center"], "widgets": [ { "widget": "Widget 2" } ] } ] }, { "classes": ["justify-content-center"], "widgets": [ { "widget": "Widget 3" }, { "widget": "Widget 4" } ] } ] }, { "classes": ["justify-content-center"], "widgets": [ { "widget": "Widget 5" } ] } ] }