Liferay Fragments: Editable Fields

Overview

One of the main fragment features is Editable Fields.

This article explains how to use them in fragment's code.

Adding Editable Fields Fragments

When you type “<lfr-” in fragment editor - you’ll see the following choices for

editable fields creation (starting with “<lfr-editable-”):

But this syntax is deprecated already.

If you need to create an editable field - you can specify the following attributes to the HTML tag,

to make it editable:

• data-lfr-editable-id - ID of editable field;

• Data-lfr-editable-type - type of editable field.

 Sample:

   <h1 data-lfr-editable-id="demo-header" data-lfr-editable-type="text">

     Header

</h1>

This example creates an editable header (H1). Once you add such a fragment to a page -

you’ll be able to modify text inside the field. This makes such fragments re-usable:

Editable Field Types

The following field types are supported:

• Text ( data-lfr-editable-type="text" );

• Rich Text ( data-lfr-editable-type="rich-text");

• Link ( data-lfr-editable-type="link");

• Image ( data-lfr-editable-type="image");

• HTML ( data-lfr-editable-type="html");

Text Editable Field

Text fields are used to make a piece of content editable (but without formatting).

Sample:

<div data-lfr-editable-id="demo-text"

    data-lfr-editable-type="text">

   Demo Text

</div>

Rich Text Editable Field

Rich Text fields also allows to define the formatting using a WYSIWYG tool.

Sample:

<div data-lfr-editable-id="demo-rich-text"

    data-lfr-editable-type="rich-text">

   Demo Rich Text

</div>

Link Editable Field

Link fields are used to create links (links to pages on sites, or external URLs).

Sample:

<a data-lfr-editable-id="demo-link"

  data-lfr-editable-type="link"

  href="#">

   Demo Link

</a>

Image Editable Field

Image fields are used for displaying images. An existing image from Document Library can be used,

or a new one can be uploaded.

Sample:

<img alt="Demo Image"

    data-lfr-editable-id="demo-image"

    data-lfr-editable-type="image"

    src=""

/>

HTML Editable Field

HTML fields are used to created editable pieces of HTML content:

<div data-lfr-editable-id="demo-html"
     data-lfr-editable-type="html">
    Demo HTML
</div>

Enjoy 😏