Documentation

Using the Fragments Editor

Liferay DXP includes a built-in editor for developing Content Page Fragments. To access the editor, go to DesignFragments in the Site Menu. From here, you can both view and manage existing Fragments and Collections and create new ones.

Creating a Fragment Collection

Before creating new Fragments, you must first create a new Collection to put them in:

  1. Open the Site Menu, and go to DesignFragments

    Note

    In Liferay DXP 7.1 and 7.2, open the Product Menu, and go to SiteSite BuilderPage Fragments.

  2. Click the Add button (Add Button) next to the Collection’s sidebar, and enter a name and description for the new Collection. The Collection’s name is displayed in the Fragments and Widgets panel of the Content Page sidebar.

    Tip

    Create Collections that group Fragments by functionality or by teams and departments.

  3. Click Save.

Collections help you organize Fragments.

Once you’ve made your first Collection, you can begin creating new Fragments.

Creating a New Fragment

  1. Go to the desired Collection and click Add (Add Button) to create a new Fragment.

    Note

    Prior to Liferay DXP 7.3, a Fragment could either be a Section or a Component. In Liferay DXP 7.3+, all Page Fragments are Components.

  2. Enter a name for the Fragment, and click Save.

    Enter a name for the new Component.

  3. In the Code tab, use the CSS, HTML, and JavaScript fields to add your Fragment’s resources. Here, you can also see a live preview of your Fragment’s appearance in different device contexts.

    Here are some HTML editing shortcuts:

    • Enter an open angle bracket (<) to access standard HTML tags and Liferay’s Fragment-specific tags.

    • Start an element attribute with data to access Liferay’s editable Fragment attributes .

    Liferay's editable Fragment attributes are available in the editor.

    The example below adds a Card component with editable text:

    <div class="marketing-card-fragment-01">
      <div class="card">
        <lfr-editable id="01-card-image" type="image">
          <img src="https://cdn.dribbble.com/users/1408464/screenshots/9323535/media/a5b9a76256562e878ecc6dc5cd0fadf0.png" class="card-img-top" alt="2020 - Try New Things">
        </lfr-editable>
        <div class="card-body">
          <lfr-editable id="02-card-title" type="rich-text">
            <h5 class="card-title">Editable Card title</h5>
          </lfr-editable>
          <lfr-editable id="03-card-text" type="rich-text">
            <p class="card-text">Here is some editable text.</p>
          </lfr-editable>
          <lfr-editable id="04-card-link" type="link">
            <a href="#" class="btn btn-primary">Editable link</a>
          </lfr-editable>
        </div>
      </div>
    </div>
    
    .marketing-card-fragment-01 .card img {
      max-width: 100%;
    }
    

    Add CSS, HTML, and Javascript resources to the Fragment and see a live preview.

  4. In the Configuration tab, use the JSON field to add configuration options) to a Page Fragment.

    Add configuration options to a Page Fragment.

  5. Click Publish to save your Fragment and make it available for use in Content Pages.

    The Fragment can be used on a Content Page.

While developing a Fragment, changes are automatically saved as a draft until your Fragment is published. Once added to a collection, you can copy, export, edit, and remove a Fragment at any time in the Fragments editor. See Managing Page Fragments for more information on available actions for Page Fragments.

Note

Since Liferay DXP 7.2 SP1+ and Liferay Portal 7.2 GA2+, you can create Page Fragments on the Global Site to make them available for all Sites. To expose this feature in the initial releases of these versions, you must create a .config file named com.liferay.fragment.web.internal.configuration.FragmentGlobalPanelAppConfiguration.config and add the enabled=B"true" property. Then copy it to your Liferay DXP instance’s osgi/configs folder. Global Page Fragments are inherited by child Sites and can only be edited from the Global Site. Any resources the Global Page Fragment references from the Global Site are copied to a Site that leverages the Page Fragment.