Client action for the Vidyano Web Client

The Vidyano web client allows for the same level of customisation as the WPF client. Perhaps even more given the nature of JavaScript en how the language handles object. Let’s see how we can create a custom client action.

When you create a Vidyano web application, you solution should look like this:


The starting point to start writing your own custom JavaScript code should be AWDemoWeb.js. By default, this file only contains 2 samples that are commented out.

//app.settings.useDefaultCredentials = true; 
//app.postQueryRender = function(query) { 
//    $('#CustomerQuery').vidyanoGrid(query); 

As you can see in the (very) small sample, the app object is the starting place to write your own custom query. This object will allow you to replace default settings, add custom logic to specific parts of your application and important for this example: you can change the default execution of actions.

The app object exposes a property “onAction.” On this object you can change the way your action will be executed. If you want to customize an action, then the skeleton will look like this:

app.onAction[“youraction”] = {
completed = function(po, onCompleted){},
execute = function(actionBase, executeAction){},
fail = function(error, onFail){}

You can see there are three extension points available.

    1. Completed: When you add a function to this property, then this action will be executed after successfully executing the “execute” method. The method has 2 parameters:
      1. a PO object: This is the object that was returned from the service.
      2. an onCompleted function: This function allows you to execute the default behaviour of the onCompleted method. This is handy when e.g. you want to execute the default behaviour after checking for a specific condition.
    2. Execute: This is the “core” functionality of an action. By default, this method will execute the service call to execute this action. When adding a function to this property, you can completely change this behaviour. The 2 parameters are as follows:
      1. actionbase: This is the “base” action object used by the Vidyano web client. This object gives you access to everything there is to know about the action, as well as giving you extra helper methods to do some specific tasks. An in depth look will be for another post, since this is an interesting object but there is so much to say about it. As always, you can see in the developer JavaScript files if you want to lookup some specific details.
      2. executeAction: this method gives you access to the default logic. Executing this action will perform this default logic and execute the service request.
    3. Fail: this method will be called when an error occurs while executing the service request. The parameters are quiet easy to understand:
      1. error: this is the error that occurred.
      2. onFail: as with the previous 2 methods is the last parameter the hook to call the default logic.

an important note is that it is not necessary to override all three  extension points. If you only want to change the “completed” part, you set the other two part to null.  This way, Vidyano will execute the default logic for these parts.

app.onAction[“youraction”] = {
completed = function(po, onCompleted){},
execute = null,
fail = null

as always, you can leave more questions in the comments!