Dec 9, 2020 11:02:21 AM Thomas Dumont avatar

Create HTML fragments (HTMLPage Plugin)

Presentation

The htmlpage plugin is used to implement and manage special HTML pages. These are fragments of an HTML page that can be edited in the Back-Office and can be inserted into the pages of the Front-Office.

Integration

You will have to add the dependency on htmlpage in the pom:

<dependency>
    <groupId>fr.paris.lutece.plugins</groupId>
    <artifactId>plugin-htmlpage</artifactId>
    <version>VERSION</version>
    <type>lutece-plugin</type>
</dependency>

The version depends on that of the Lutece core:

  • 4.1.3 from Lutece 6
  • 4.1.1 before Lutece 6

On an existing site, you will need to activate the plugin in Back-Office in System > Plugins management. For version 4.1.3, we must also give the rights to the Back-Office users concerned to access the management of special pages.

It is possible to do these two actions by means of an update script on the database.

Administration

In Back-Office, management is carried out from System > HtmlXpage Management. The page displays the list of special HTML pages possibly filtered according to the workgroups to which the user belongs. On each line, it is possible to delete, duplicate or modify the corresponding special page. To add a new special page, you will need to click on the button Add a Html XPage.

The creation or the modification, allow to enter the data of the special page which are:

  • Html page name
  • Status (the special page will only be visible in Front-Office if the status is Active)
  • Workgroup (allows you to make the special page visible in the Back-Office only to users who are part of a certain workgroup. See Managers > Workgroups management)
  • Role (makes it possible to make the special page visible in Front-Office only to users with a certain Lutèce role. See Users > Lutece Role management)
  • HTML content (entered through an HTML editor)

Use

In order for the content of a special page to be inserted in Front-Office, must be added to the page concerned a tag of the form

${htmlpage_<ID_HTMLPAGE>!}
where the id of the special page can be viewed in the list of special pages in the Back-Office.

...
<!-- Header -->
<header role="banner">
    ${page_header}
</header>
<main class="main-raised">
    <!-- Content -->
    ${htmlpage_1!}
    ${htmlpage_2!}
    ${htmlpage_3!}
    ${page_content}
</main>
<!-- Footer -->
<footer>
    ${page_footer}
</footer>
...

Inserting a tag with an id that is not yet used does not cause an error. Same thing if the id corresponds to a special page which has been deleted.

In order for the content of a special page to be integrated into all the Front-Office pages, the tag will have to be added in the file /templates/skin/site/page_frameset.html.

Consultation in a dedicated page

An XPage allows you to consult each special page in a dedicated page. The path /jsp/site/Portal.jsp?Page=htmlpage provides access to a search page for special pages to which the user has access. To view a special page the path is /jsp/site/Portal.jsp?Page=htmlpage&htmlpage_id=<ID_HTMLPAGE> where the id of the special page can be viewed in the list of special pages in Back-Office.

It is therefore possible to offer the content of the same special page both as part of a page of the application and in a dedicated page. A link to the dedicated page can then be proposed with another special page so that it can be modified in Back-Office.