Monday, May 11, 2015

How to add custom message to WSO2 API Publisher - Show custom message based on user input or selections

In API Manager we can add sub themes and change look and feel of jaggery applications.
Please follow below instructions. Here i have listed instructions to add new warning message when you changed API visibility.

(1) Navigate to "/repository/deployment/server/jaggeryapps/publisher/site/themes/default/subthemes" directory.
(2) Create a directory with the name of your sub theme. For example "new-theme".
(3) Copy /repository/deployment/server/jaggeryapps/publisher/site/themes/default/templates/item-design/template.jag to the new subtheme location "/repository/deployment/server/jaggeryapps/publisher/site/themes/default/subthemes/new-theme/templates/item-design/template.jag".

(4) Go to template.jag file in sub themes directory we created and find following code block.

        $('#visibility').change(function(){
            var visibility = $('#visibility').find(":selected").val();
            if (visibility == "public" || visibility == "private" || visibility == "controlled"){
                $('#rolesDiv').hide();
            } else{
                $('#rolesDiv').show();
            }
        });
Then change it as follows. You can change message if need.

        $('#visibility').change(function(){
            var visibility = $('#visibility').find(":selected").val();

            if (visibility != "public"){
            jagg.message({content:"You have changed visibility of API, so based on visibility subscription availability may change",type:"warn"});
            }

            if (visibility == "public" || visibility == "private" || visibility == "controlled"){
                $('#rolesDiv').hide();
            } else{
                $('#rolesDiv').show();
            }
        });



(5) Edit "/repository/deployment/server/jaggeryapps/publisher/site/conf/site.json" file as below in order to make the new sub theme as the default theme.
        "theme" : {
               "base" : "fancy",
                "subtheme" : "new-theme"
        }



Here i have listed generic instructions to change this using sub themes.

No comments:

Post a Comment