• Invoke Liferay JSON Web Service from Web Content Display Portlet

    Posted on November 16, 2016 by Hamidul Islam in liferay 7.

    consume-json-web-service


    aimYes we can invoke Liferay JSON Web Service from Web Content Display Portlet too. Web Content Display Portlet is used for displaying HTML content in the portlet. However we can easily consume JSON Web Service from it. In this article we will build one small POC to consume JSON Web Service.


    Highlight of this article

    1. Identify JSON Web Service. We will use web service for updating user password.

    2. Create web content structure and template 

    3. In the template write the code for consuming the web service. 


    Finding Liferay JSON Web Service: 

    There are many JSON Web Services available in the Portal. To list out all the services, access the below URL

    http://localhost:8080/api/jsonws

    After accessing this you can search for different web services. You can search the string update-password.

    update-password

    Note :

    We can invoke JSON web services directly by the browser providing the correct parameters.

    invoke-json

    After invoking, it will display the result as well as sample code. We can copy the code as shown in the below

    json-javascript

     

    Final Steps...

    Step 1: Create a sample Structure with any fields

    Step 2: Create a template for the structure and add the below code

    
    <div class="alert alert-danger alert-dismissible fade in" role="alert" id="password-error" style="display:none;">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <strong>Oops!</strong> <span id="password-error-message"></span>
    </div>
    
    
    <div class="alert alert-success alert-dismissible fade in" role="alert" id="password-success" style="display:none;">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <strong>Cool!</strong> The password is updated successfully
    </div>
    
    
    <table class="table table-bordered table-striped table-responsive">
    
    <tr>
    
    <td>
    New Password
    </td>
    
    
    <td>
     <input type="password" id="password1">
    </td>
    
    </tr>
    
    
    <tr>
    
    <td>
    Confirm Password
    </td>
    
    
    <td>
     <input type="password" id="password2">
    </td>
    
    </tr>
    
    
    <tr>
    
    <td colspan="2">
    <input type="button" class="btn btn-secondary" value="Change Password" onclick="changePassword()">
    </td>
    
    </tr>
    
    </table>
    
    

    In the above code some bootstrap classes are also used.

    Step 3:

    Create a sample web content with the Template as created in the Step 2


     2 JavaScript lines in the above code 

    //Check whether the user has logged in or not 

    var isSignIn = Liferay.ThemeDisplay.isSignedIn();

    //Get user id of the logged in user 

    var currentUserId = Liferay.ThemeDisplay.getUserId(); 


    Some output:

    screenshot1

    screenshot2

    screenshot3

    screenshot4

     

    web-content-template

    Post Tagged with , ,
Comments are closed.
Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close