Is there buttons / funtion calls & tables handled in MetaWidget - js

Question

I am wondering if some can help me out to get the buttons , function calls and tables displayed using metawidget jsonSchema.
Unfortunately, I can see it just as a form render-er for our applications, is it something which we need to define externally? also if we could navigate from one form to another somehow

<script type="text/javascript">
            var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ), {

                inspector: new metawidget.inspector.CompositeInspector( [ new metawidget.inspector.PropertyTypeInspector(),
                    function( toInspect, type, names ) {

                        return {
                            properties:
                                name: {
                                    required: true
                                },
                                notes: {
                                    type: "string",
                                    large: true
                                },
                                employer: {
                                    type: "string",
                                    section: "Work"
                                },
                                department: {
                                    type: "string"
                                }
                            }
                        };
                    } ] ),

                layout: new metawidget.jqueryui.layout.TabLayoutDecorator(
                    new metawidget.layout.TableLayout( { numberOfColumns: 2 } ))
            } );        
            mw.toInspect = person;
            mw.buildWidgets();

Above schema holds only properties to render the fields, but where to specify the functionalities?

Answer 1

Assuming the object you are inspecting has functions, in JSON schema you can specify the property with a type of function. Metawidget will render these as buttons (and will wire up their click handler).

Note that PropertyTypeInspector will find functions automatically, so you could also consider combining your JsonSchemaInspector with a PropertyTypeInspector using CompositeInspector.

Often your data object (e.g. var person = { firstname: 'Homer', surname: 'Simpson' } ) and your actions object (e.g. var personActions = { save: function() {...}, delete: function() {...}} ) are separate. In those cases you can position two Metawidgets as siblings (or nested within each other), each pointing at different objects.

Finally for tables use a type of array. In JSON schema, you nest an items object that further nests a properties object, to describe the properties of the array items. See this example http://blog.kennardconsulting.com/2016/04/metawidget-and-angular-arrays.html (it's for Angular, but the JSON Schema is the same)