Global client API

The client DWKit app has a global window object with the name API. You can perform some typical operations via its methods by calling the former from the client user's actions code. This section describes the methods of this object.

Prerequisites

The API object is connected to the (app.jsx) application as follows:

import {API} from './../../scripts/optimajet-app.js'
class App extends React.Component {
    constructor(props) {
        window.DWKitApp = this;
        window.DWKitApp.API = API;
        ...
    }

    ...
}

After that you can call the methods of this object as follows: window.DWKitApp.API.someMethod() or DWKitApp.API.someMethod().

API object methods

  • formValidate(args) - is used to launch the default form validation mechanism. Usage example:
validate: function (args){
    DWKitApp.API.formValidate(args); //standard validation
    var hasError = false;
    var errors = {};
    // custom validation
    // hasErrors = true;
    // errors.ComponentName = 'Error message';
    if(hasError){
     throw {
         level: 1,
         message: 'Check errors on the form!',
         formerrors: {main: errors}
     };
    }
    return {};
}
  • clearErrors() - removes errors for all form controls

  • redirect(type,name,parameters) - loads a page with the URL formed as /{type}/{name}/{parameters}

  • redirectToForm(name, parameters) - loads a page with the URL formed as /form/{name}/{parameters}

  • redirectToFlow(name, parameters) - loads a page with the URL formed as /flow/{name}/{parameters}

  • setDataField(key,value) - sets a form's data object setting. Usage example:
{
    var data = ... //getiing data for a grid
    DWKitApp.API.setDataField("gridName", data); //the data will be shown in the grid with name "gridName"
}
  • changeModelControl(args, key, name, value) - sets the value value to the name property of the control with the key name. Usage example:
init: function(args){
    return DWKitApp.API.changeModelControl(args, 'someControlWithImage', 'src', '/images/someimage.svg')
}

This code will set the URL of the image to be loaded for the control that displays the image.

Please, note, that in order for the call of this method to have an effect, the result returned by this method should be returned from client user's action

  • changeModelControls(args,controlsParameters) - changes properties of several controls. controlsParameters - an array of objects{key,name,value}; the object fields have the same meaning as the changeModelControl method. Usage example:
init: function(args){
    return DWKitApp.API.changeModelControls(args, [
            {key: 'someControlWithImage', name:'src', value:'/images/someimage.svg'},
            {key: 'someControlWirhContent', name:'content', value:'NewContentValue'},
        ]);
}

Please, note, that in order for the call of this method to have an effect, the result returned by this method should be returned from client user's action

  • rewriteControlModel(controlkey, rewriter) - this is another way of changing control properties. controlkey - the name of the control. rewriter - a function that changes the contol's properties. When called, rewriter receives one parameter - model - an object with all control properties which can be modified. Usage example (adding columns to a grid):
addColumnsToGrid: function (args){
    //custom data request
    $.get(url).done(function (data) {
        //adding new columns tu the grid based on the response
        var gridModelRewriter = function (model){
            model.columns = [];
            if(Array.isArray(data) && data.length > 0){
                for(var p in data[0]){
                    if(p == "Id") continue;
                    model.columns.push({key: p, name: p, resizable: true, width: 150, sortable: true});
                }
            }
        }
        DWKitApp.API.rewriteControlModel("grid", gridModelRewriter); //rewrite grid model with new columns
        DWKitApp.API.setDataField("grid", data); //set data to the grid
    })
    .fail(function (jqxhr, textStatus, error) {
       alertify.error(textStatus);
    });
}
  • createElement(type,props,children) - create a React component of the type (string) type, with the props properties and child componentschildren or value, which should be displayed by the component. Usage example (creating a hyperling instead of displaying values in a grid column):
init: function(args){
    var gridModelRewriter = function (model) {
        model.columns[1].customFormatter = function(p){ 
            var url = "/form/DocumentEdit/" + p.row.Id;
            return DWKitApp.API.createElement("a", { href: url}, p.value);
        };
        return model; 
     };
    DWKitApp.API.rewriteControlModel("grid", gridModelRewriter);
}