Gretyl's Portal

Heretto Help

Show Page Sections

Custom Sections

Custom sections are areas of the portal home page that can be personalized to display specific content, like What's New or Featured Videos. Custom sections provide flexibility in presenting information that needs to be highlighted to the audience.

Custom sections can be used to introduce more contextual information about your Heretto Portal, like:

  • Purpose of the portal

  • Videos

  • Popular articles

  • Company description

Custom sections are rendered below navigational tiles and above the footer of your home page.

There are no requirements related to the placement of custom sections. If they do not have to be included in the navigation, you can put them anywhere in the sitemap. However, we recommend putting them either at the beginning or at the end of your sitemap to keep its structure neat and tidy.

Add Custom Sections

You can add your own sections to the home page by using the topicgroup element.

Tip:

By applying the outputclass attribute to DITA elements in the topics within the topicgroup, you can style them freely with the CSS code. Each outputclass value is rendered as an HTML class that can be used as a CSS selector. To learn more about Heretto Portal styling, refer to Customize Heretto Portal Styling.

  1. Open the sitemap connected to your portal.
  2. Right-click the sitemap element and append it with the sitesection element.
    Figure 1. Appending Operation
    appending sitemap element with sitesection element
  3. Right-click the sitesection element and append it with the topicgroup element.
  4. Hover over the topicgroup element and click the gear icon to open the attributes tab.
    1. To ensure your additional section is not displayed in the search results, set the search attribute to no.
    2. To ensure your additional section is not listed in the navigation, set the toc attribute to no.
    Figure 2. Properly Set Topic Group
    properly set topicgroup element
  5. Right-click the topicgroup element and append it with the data element.
  6. Hover over the data element and click the gear icon to open the attributes pane.
    1. Fill in the name field with the topicgroup-name value.
    2. Fill in the value field with a unique meaningful value that will represent your section. This value will be later used for translation purposes. Do not use spaces or special characters.
      <data name="topicgroup-name" value="about-us"/>

      By default, the title of your section will be displayed on the home page as label.your-value. Our example will be displayed as label.about-us. To change the title of the newly created home page section, see Localize Custom Sections.

  7. Append your topicgroup element with topics that contain contents that you would like to display on the home page.
    Note:

    If you want to localize your content, add a map reference instead as you can only localize maps. If you do not localize content, it is fine to add topic references instead.

    The example below shows how to add an additional section with contents based on two topics: our-values.dita and see-more.dita. For your implementation, use as many topics as necessary. The example assumes that you already introduced two tiles to the sitemap: “Site Section 1” and “Site Section 2” to show you how additional sections are placed with reference to the tiles. To learn more about adding tiles, see Add Sitesections to Your Sitemap.

    <!-- A site section that renders additional blocks of content on the home page -->
    <sitesection>
        <topicgroup search="no" toc="no">
    	<!-- Introduces a "topicgroup-name" parameter with an ID "about-us" -->
            <data name="topicgroup-name" value="about-us"/>
    	<!-- Topics with content that is going to be displayed on the home page -->
            <topicref href="content/our-values.dita"/>
            <topicref href="content/see-more.dita"/>
        </topicgroup>
    </sitesection>

Go to the home page of your Heretto Portal and refresh it to see the newly created section.

r

Localize Custom Sections

You can add new sections to your Heretto Portal home page. Section titles are saved as strings that need to be localized. This process also produces a valid structure even if you do not localize your content into multiple languages.

To learn more about adding new sections to the home page, refer to Add Custom Sections.

To explore general rules for strings localization in Heretto Portal, refer to Internationalized Strings Configuration Reference.

  1. Open the sitemap connected to your portal.
  2. Find the sitesection element related to the home page section that you want to localize.
  3. Expand the sitesection element to see the value of the data element.
    data value example
  4. Create a localization string variable that you will use in the next steps. It follows the pattern: label.your-value. Save or remember the string.
  5. Open the config.json file connected with your Heretto Portal.
  6. Add your localization string for every locale that you localize your Heretto Portal to.
    Remember:

    Locale codes in the config.json file have to be the same as the codes that you use during the localization process in Heretto CCMS.

       "i18n": {
          "en-us": {
             "label.about-us":"About us"
          },
          "de-de": {
             "label.about-us":"Über uns"
          }
       }
  7. To localize contents of your additional sections, follow the standard localization process. You only need localization strings for section titles.

Go to the home page of your Heretto Portal and refresh it. You should now be able to see the updated title of the section in a selected language.

translated section title in a web site