Skip to main content

Adding custom validations to WSO2 Enterprice Store - Publisher asset creation page.

Writing an asset extension

Asset extensions allows to create custom functionalities and look and feel to a certain asset type in WSO2 Enterprise Store. With this example, I am going to create a new asset type and add a custom validation to the asset creation page.

Download WSO2ES product distribution from wso2.com and extract it to your local drive. Start the server and fire up browser with the admin console url.

https://:9443/carbon/

Navigate to Extensions > Configure > Artifact Types and click the "Add new Artifact" link.





















This will load the UI with a new default artifact.

Notice that it has following attributes in it's root node.

shortName="applications" singularLabel="Enterprise Application" pluralLabel="Enterprise Applications"

"applications" is the name of new asset type we are going to add.

In our example we are going to do a custom validation to the asset creation page. Let's add the fields we are going to validate.

Our intention is to provide 4 check-boxes and display an error message if at least one checkbox is not selected. Basically if user does not check any of the four checkboxes we provide will display an error message.

 <table name="Tier Availability">  
          <field type="checkbox">  
            <name>Unlimited</name>  
          </field>  
          <field type="checkbox">  
            <name>Gold</name>  
          </field>  
          <field type="checkbox">  
            <name>Silver</name>  
          </field>  
          <field type="checkbox">  
            <name>Bronze</name>  
          </field> 
        </table> 

Restart the server.
Now when we go to the publisher app, the new content type is available.















Now click the Add button to add a new asset of "Enterprise Applications".

You will be able to notice the new section we added on the rxt is available in this page.













We are going to add a custom validation to this four checkboxes where it will validate if at least one of the checkboxes is checked and if not show an error message bellow the checkboxes.

We can't do any changes to the core web application. But it's possible to add custom behavior via ES extensions. Since this is an asset specific customization which need to apply only to the new "application" asset type we need to create an "asset extension". There is one other extension type call "app extension" where it applies to all the asset types across the whole web application.

Navigate to "repository/deployment/server/jaggeryapps/publisher/extensions/assets" folder. Create a new folder and name it "applications". Note that the "applications" is the value of "shortName" attribute we gave on rxt creation. The complete path to the new folder is "repository/deployment/server/jaggeryapps/publisher/extensions/assets/applications".

Now with this folder we can override the default files in the core application. We need to add a client side javascript to the add asset page and with that file we need to initialize the client side event registrations where it will validate the checkboxes.

Note the folder structure in "repository/deployment/server/jaggeryapps/publisher/" ( say [A] ). We can override the files from above to "repository/deployment/server/jaggeryapps/publisher/extensions/assets/applications" ( say [B] ).

Copy [A]/themes/default/helpers/create_asset.js to [B]/themes/default/helpers/create_asset.js.

Add a new client side script of your choice to the list of js in [B]/themes/default/helpers/create_asset.js. I added a file call 'custom-checkbox-validate.js'. The content of [B]/themes/default/helpers/create_asset.js will be as follows.


var resources = function (page, meta) {
    return {
        js:['libs/jquery.form.min.js','publisher-utils.js','create_asset.js','jquery.cookie.js','date_picker/datepicker.js','select2.min.js','tags/tags-common.js','tags/tags-init-create-asset.js','custom-checkbox-validate.js'],
        css:['bootstrap-select.min.css','datepick/smoothness.datepick.css','date_picker/datepicker/base.css', 'date_picker/datepicker/clean.css','select2.min.css'],
        code: ['publisher.assets.hbs']
    };
};

Now create the new file [B]/themes/default/js/custom-checkbox-validate.js
Put a alert('') in the above file and see if you are getting a browser alert message.

If you are not getting the alert message following might be probable causes.

  • You haven't restart the server after the extension creation
  • The asset type is not macing with the folder name.
  • The folder structure in the extension is not aligning with the core  application folder structure.

Update the custom-checkbox-validate.js with the following content. The script bellow will validate at least one checkbox is checked from the four checkboxes. 


$(document).ready(function () {
    validator.addCustomMethod(function () {
        //Get the 4 checkboxes jQuery objects.
        var bronze = $('#tierAvailability_bronze');
        var unlimited = $('#tierAvailability_unlimited');
        var gold = $('#tierAvailability_gold');
        var silver = $('#tierAvailability_silver');
        var errorMessage = "You need to check at least one from the tires";

        /*
        * Custom event handler to the four checkboxes.
        * error by default is shown after the input element.
        */

        var checkboxClickCustomHandler = function () {
            if (silver.is(':checked') || gold.is(':checked') || unlimited.is(':checked') || bronze.is(':checked')) {
                bronze.removeClass("error-field");
                bronze.next().remove();
            } else {
                validator.showErrors(bronze, errorMessage);
            }
        };

        //Register event hanlder for the the for checkboxes
        bronze.click(checkboxClickCustomHandler);
        unlimited.click(checkboxClickCustomHandler);
        gold.click(checkboxClickCustomHandler);
        silver.click(checkboxClickCustomHandler);

        // Do the custom validation where it checks at least one checkbox is checked. Return type is a json of format {message:"",element:}
        if (silver.is(':checked') || gold.is(':checked') || unlimited.is(':checked') || bronze.is(':checked')) {
            return {message: "", element: bronze};
        } else {
            return {message: errorMessage, element: bronze};
        }
    });
});

Comments

Anonymous said…
Great Post!

This post helped quite a bit with getting validation working for our new LC transition inputs UI.
May 31, 2016 at 4:04 AM
Post a Comment

Popular posts from this blog

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements. We can do the same thing with the plain old html and javascript. But how? First you need to create the site main layout using divs and give them unique ids. <html> <title>HTML Includes</title> <script language="javascript" src="js/main.js"></script> <script src="js/prototype.js" type="text/javascript"></script> <script language="javascript" xml:space="preserve"> // <
6 comments
Read more

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'
Post a Comment
Read more

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to
Post a Comment
Read more