Invoke Liferay JSON Web Service from Web Content Display Portlet

---

Yes 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.

Note :

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

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

 

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:

 

web-content-template