Application display template(ADT) is a great way of changing the Portlet display dynamically without changing code in Portlet JSP pages. In Liferay 7, application display template known as Widget Template. It's allows portal administrators to override the default display templates for portlets. 

1. Create Structure:

The steps to create a Structure:

• Select desired site → Content & data → Web-content

• Click on structure Tab
• Click on "+" button

• Enter the name of the structure
• Add fields by dragging items from left to right
• And click on the "Save" button to save the structure

You can change field name as per your requirement

2. Create Template:

The steps to create a Template:

• Select desired site → Content & data → Web-content → Templates
• Click on "+" button

• Enter the name of the template
• Select The created Structure in the basic information section

Add the source code :

    Title : ${Title.getData()} <br />
Description : ${Description.getData()} <br />
<#assign image_map = jsonFactoryUtil.createJSONObject(image.data)>
<#if image_map.getString("uuid")?? && image_map.getString("uuid") != "">
	<#assign image = image.getData() />
<#else>
	<#assign image = image_map.getString("data") />
</#if>

<#if image?? && image != "">

3. Create Web Content:

 The steps to create a Template:

• Select desired site → Content & data → Web-content
• Click on "+" button

• Select the structure

• Give the name of web content
• Fill the fields with appropriate details
• Click on Publish

• Go to the desired page
• Drop the Web Content Display portlet
• Click on Select Web Content to make it visible
• Select the web content which you want to display

We can add any number of web contents using this structure and template. We can configure asset publisher to render web content using this structure. Now in order to make look and feel better we can write application display template to render webcontents list.

---

Now here are the steps to create the app display template

1. Create Application Display Template using asset publisher:

The steps to create the ADT:

• Select desired site → Configuration → Application Display Templates
• Click on "ADD" button

• Select Asset Publisher Template
• Add the name of the asset publisher
• Add below code in ADT

    <#if entries?has_content>
        <div class="row">
            <#list entries as curEntry>
                <div class="col-md-3 border border-primary" >
                    <#assign 
                        assetRenderer = curEntry.getAssetRenderer()
                        journalArticle = assetRenderer.getAssetObject()
                     />
                    <@liferay_journal["journal-article"]
                        articleId=journalArticle.getArticleId()
                        ddmTemplateKey=journalArticle.getDDMTemplateKey()
                        groupId=journalArticle.getGroupId()
                    />
                </div>
            </#list>
        </div>
    </#if>
    

• Click on the Save button
• Go to the desired page
• Drop the Asset Publisher portlet, configure it with above ADT and structure
• Click on "3 point" menu for the portlet and configure
• Click on "Display Settings" Tab and change the template to your created ADT 

• Click on "Asset Selection" and choose Asset type : Web Content Article
• Choose the Structure "demoStructure"

• Save your changes

Now, you can see your web content as shown below

---

 

ReactJS is an open-source JavaScript library for building user interfaces. It’s maintained by Facebook and a community of individual developers and companies. ReactJS can be used as a base in the development of single-page or mobile applications. Nowadays, ReactJS become the most popular JavaScript framework to create web apps which is integrate with Liferay to create a react-portlet.

We will use “npm-react-portlet” for creating react module project. There are two ways to create react portlet:

1. Create React portlet with Blade Cli:

Navigate to the directory of your Liferay-workspace-project in the terminal.

Then fire the below command:

blade create -t npm-react-portlet -p com.themeray.project.react -c ThemerayReactProject themeray-project-react-portlet

• -t: Template Type (npm-react-portlet: needed to create react portlet)
• -p: package name for the module project
• -c: Class name for the module project
• themeray-project-react-portlet: Name of the project

All necessary react files will be created automatically

2. Create React portlet with Eclipse IDE:

You can follow the below steps in Eclipse to create npm-react-portlet:

- Go to File →New→Liferay Module Project.

- Add your module project name

- Select the Project template name as npm-react-portlet.

- Click on the Next button.

- Add the Component Class Name (ThemerayReactProject) and Package name (com.themeray.project.react).

- Click on the Finish button

All necessary react files will be created automatically

3. Add the dependency in react-portlet:

By default, the dependencies for React and Liferay module being added in package.json when you have created the react-portlet. If you want to use another react component you must have to register the component in project dependency.

You need to navigate to the directory of your Liferay-module-project in the terminal.

Then fire the below command:

  npm install [--save] [packagename]
  

• packagename: name for the package you needed
• --save: Package will appear in your dependencies

Example:

  npm install --save react-router-dom
  

Liferay version: 7.3

This guide allows creating a Liferay theme which helps us to override the look & feel of the Liferay control panel.

Assuming that you have already created a Liferay-workspace project in eclipse IDE.

1. Create a theme:

Link to create the theme.

This is the file structure for your custom theme

2. Edit Liferay-look-and-feel.xml file

Remove all XML tags under theme tag and add below one

	<control-panel-theme>true</control-panel-theme>

Now your Liferay-look-and-feel.xml will look like below.

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 7.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_7_2_0.dtd">
 
<look-and-feel>
    <compatibility>
        <version>7.2.0+</version>
    </compatibility>
    <theme id="custom-admin" name="custom-admin">
        <control-panel-theme>true</control-panel-theme>
    </theme>
</look-and-feel>

3. Copy the theme code:

You need to copy below theme folder from the liferay source code "${liferay-portal-src}/modules/apps/frontend-theme/frontend-theme-admin/src" in the "${custom-admin-theme}/src" folder

- CSS

- Templates

- Images

4. Edit _custom.scss:

As per your requirement, you can add/edit CSS rules in _custom.scss file.

We have added below CSS rules _custom.scss file for example. We have changed the control panel color from blue to green.

.product-menu,
.product-menu .panel-header {
	background-color: #21716a !important;
}

.product-menu .panel .panel-body {
	background-color: #21716a;
}

.product-menu a.list-group-heading.active,
.product-menu a.list-group-heading.active:hover,
.product-menu a.list-group-heading.active:focus {
	background-color: #21716a;
}

.product-menu a.list-group-heading.active+div {
	background-color: #21716a;
}
.product-menu .list-group-heading.panel-header:not(.collapsed){
	background-color: #21716a;
}

.product-menu .show .list-group-item{
	background-color: #2e837b !important;
}

#content-wrapper .control-menu-level-1 {
	background-color: #2e837b;
}

5. Edit portal-ext.properties:

Add this property "control.panel.layout.regular.theme.id={add your theme id}" to your portal-ext.properties file

Note: Here theme id that you have entered while creating a custom theme.

6. Deploy the theme:

- Deploy the theme 

- Restart your Liferay server

- Go to Control Panel → configuration → instance setting → instance configuration.

- Select the custom theme from Default Control Panel Theme dropdown and save.