This wiki does not contain official documentation and is currently deprecated and read only. Please try reading the documentation on the Liferay Developer Network, the new site dedicated to Liferay documentation. DISCOVER Build your web site, collaborate with your colleagues, manage your content, and more. DEVELOP Build applications that run inside Liferay, extend the features provided out of the box with Liferay's APIs. DISTRIBUTE Let the world know about your app by publishing it in Liferay's marketplace. PARTICIPATE Become a part of Liferay's community, meet other Liferay users, and get involved in the open source project. Resources Importer Web
Background #
Resources Importer is a web-plugin created by Ryan Park to allow front-end developers to package web content source and portlet configurations together in a theme.
All of the web content source files are located in the (my-theme-name)/WEB-INF/src/resources-importer/
A JSON file, named "sitemap.json" is used to describe the site pages, layouts, web content and portlet configurations.
When the theme is deployed with the accompanied resources-importer-web a site template is created. Note: The Welcome-Theme and its content gets applied to the default site if there isn't any user content found.
Bradley Wood has been working on getting the first batch of themes ready for Marketplace with this new method. So look at zoe-brochure, zoe-healthcare, zoe-resort, zoe-tech to get an idea of how some of the code looks.
Requested Features #
- None pending.
Completed Features #
- Allow tags to be created/assigned to Web Content, documents, etc. LPS-30470 - Committed
- Define Content for Nested Portlet in sitemap.json file LPS-30553 - Committed
- Add resources importer files and folder structure in liferay SDK LPS-29351 - Committed
Version trunk #
- Link to images in web content template.vm LPS-30590 - Committed
- Create Development Flag LPS-30463 - Committed
- Allow Parent/Child Structure Relationship LPS-30462 - Committed
Version 1.0.0 #
( Available in Marketplace) <hr />
- please create a ticket in JIRA using the resources-importer component type
Configurations #
Developer Mode #
A theme can have the developer moder turned by adding this property: resources-importer-developer-mode-enabled=true in their liferay-plugin-package.properties file of the theme.
When the theme that has the dev mode turn on, The site template is recreated the site template without having to delete the site that is using the template, then deleting the site template.
This dev mode is used if the content of the theme has been changed such as sitemap.json or anything in the "[theme_folder]/WEB-INF/src/resources-importer" folder.
Source File Folder Structure #
- WEB-INF
- src
- resources-importer
- archive.lar (optional)
- sitemap.json
- document_library
- documents
- image1.png
- image2.png
- journal
- articles
- Main Carousel.html
- Featured Content (name of template)
- Exceptional Support.xml
- Our Goal.xml
- The Experience.xml
- structures
- Featured Content.xml
- Parent Structure.xml
- Parent Structure [folder]
- Child Structure.xml
- templates
- Featured Content [structure name]
- Featured Content.vm
- Featured Content2.vmarticles - group articles by a folder that matches the name of the template file structures - no folders only structure .xml files templates - group templates by a folder matches the name of the structure file
Archive.lar #
An Archive.lar file can be added in the resources folder and will get applied to the site template. The .lar is exported from the site scope.
Web Content #
Use title case [ex. Featured Content] for both folder and files within (articles, structures, templates) required folders
Document Library #
In order to include images in web content.html files or journal article .xml files here are how to reference the documents located in (./WEB-INF/src/resources-importer/document_library/documents/)
For .html:
<img src="[$FILE=My Image.jpg$]" />
<a href="[$FILE=My Document.pdf$]">Click Here</a>
For .xml
<![CDATA[[$FILE=carousel_2.png$]]]>
For .vm
[$FILE=image_name.jpg$]
sitemap.json #
{
"layoutTemplateId": "2_columns_ii",
"layouts": [
{
"title": "Home",
"name": "Home",
"friendlyURL": "/home",
"layoutTemplateId": "1-2-3-columns",
"columns": [
[
"Home Banner.html"
],
[
"Welcome to Our Clinics.html"
],
[
"Our Mission.html"
],
[
"Our Team.html"
],
[
"Our Promise.html"
],
[
"Recent News.html"
]
]
},
{
"title": "About",
"layoutTemplateId": "2-1-2-4-columns",
"name": "About",
"friendlyURL": "/about",
"layouts": [
{
"title": "Category 1",
"name": "Category 1",
"friendlyURL": "/category-1",
},
{
"title": "Category 2",
"name": "Category 2",
"friendlyURL": "/category-2",
},
{
"title": "Category 3",
"name": "Category 3",
"friendlyURL": "/category-3",
},
{
"title": "Category 4",
"name": "Category 4",
"friendlyURL": "/category-4",
}
],
"columns": [
[
"The 7 Cogs Promise.html"
],
[
{
"portletId": "71",
"portletPreferences": {
"displayStyle": "from-level-1-with-title"
}
}
],
[
"Make an Appointment.html"
],
[
"Make an Appointment Left Image.html"
],
[
{
"portletId": "1_WAR_webformportlet_INSTANCE_${groupId}",
"portletPreferences": {
"portletSetupCss": {
"advancedData": {
"customCSSClassName": "make-appointment"
}
},
"portletSetupShowBorders": "false",
"fieldsEditingDisabled": "true",
"fieldType1": "text",
"fieldLabel1": "Full Name",
"fieldType2": "text",
"fieldLabel2": "Email",
"fieldType3": "textarea",
"fieldValue": "Write your short description here",
"title" : "Seeing your Doctor, made easy",
"description" : "Lorem ipsum dolor sit amet, lohtil
consectetur adipiscing elit.
Vivamus feugiat, augue in sollicitudin blandit, magna
purus bibendum justo, quisnic scelerisque ipsum turpis
eu dui. Nunc lobortis, augue ac viverra convallis."
}
}
],
[
"Section 1.html"
],
[
"Section 2.html"
],
[
"Section 3.html"
],
[
"Section 4.html"
]
]
},
{
"title": "Clinic",
"name": "Clinic",
"friendlyURL": "/clinic"
},
{
"title": "Services",
"name": "Services",
"friendlyURL": "/services"
},
{
"title": "Health Plans",
"name": "Health Plans",
"friendlyURL": "/health-plans"
},
{
"title": "Location",
"name": "Location",
"friendlyURL": "/location"
},
{
"title": "Contact Us",
"name": "Contact Us",
"friendlyURL": "/contact-us"
}
]
}
=== Web Form Portlet Example ===
{{{
{
"portletId": "1_WAR_webformportlet_INSTANCE_${groupId}",
"portletPreferences": {
"fieldType2": "radio",
"fieldOptions2": "option1,option2,option3",
"title" : "",
"description" : "",
"portletSetupCss": {
"advancedData": {
"customCSSClassName": "make-appointment"
}
}
}
}
