Contact Us
A 101-103 Siddhivinayak Towers, Off S.G. Highway, Ahmedabad, Gujarat 380051

Page Fragments in Liferay DXP

by Attune World Wide / /

Page Fragments in Liferay 7.1

Page Fragments is a new feature of Liferay 7.1. Page Fragments are a combination of HTML, CSS, and JavaScript. It’s almost like a piece of basic web content where the HTML, CSS, and JavaScript are kept in separate fields. Web developers can now save page sections as Fragments and reuse them across a Site. Developers can now create a library of designed components for others to build pages quickly without having to touch the code. Via the built-in ‘fragment editor’, web developers are able to implement a fragment. Afterward, some parts of this fragment can be made editable and translatable. Web Developers can also use their existing tools to develop Fragments, then import them into Liferay. The goal of Page Fragments is to take a design and realize it on a web page. To do this, developers are given a space where they have a “blank slate.” You have three tools at your disposal to accomplish this:

HTML: The markup of the fragment. Fragments use standard HTML with special tags to add dynamic behavior.

CSS: CSS styles and positions the fragment’s markup.

JavaScript: JavaScript provides dynamic behavior to the fragment.

Even though the Fragment itself is static, there’s no stopping you from pulling in web content (or other assets) and using the JavaScript to make your Fragment dynamic. Liferay portlets can also be embedded in Fragments as “widgets,” making pages with Fragments more dynamic than regular web content. This is a much more flexible way of working compared to the present process of working with portlets, structures, and articles. This is especially true for the marketer since they don’t have to leave the page anymore and are able to adjust content on the fly! Creating a simple page fragment is very easy. Go to Site Administration and for your selected site click Build → Fragments. Create a new Collection named Developing Fragments. Inside of the new Collection, create a new Fragment named Basic Fragment. You’re now on the Fragment editing page. There are four panes on this screen. You enter HTML in the top left pane, CSS in the top right, JavaScript in the bottom left, and preview the results in the bottom right. You can look at the three editing panes as if each were writing to a separate file. Everything in the HTML pane goes to index.html, the CSS pane goes to index.css, and the JavaScript one goes to index.js

Here’s how this works:
Add the following code inside the div in the HTML pane: < h1 > This text is styled, so it will look pretty! < /h1 >

Add the following code to the CSS pane inside the fragment block: width: 100%; background-color: white; text-align: center; padding: 2em 0; font-size: 28px;

Add this code below it and replace the ##### with the auto-generated number provided for the fragment. .fragment_##### h1 { font-weight: 100; width: calc(100% – 1em); max-width: 60ch; margin: 0 auto; font-size: 28px; }

Click Publish to save your work and make it available to add to a content page.

About Attune World Wide

What you can read next

Leave a Reply

Your email address will not be published. Required fields are marked *

six + 8 =

Recent Posts

X