Homepages

What is the Homepage?

Your homepage can be created by users with the Ecosystem Administrator role and may feature a combination of featured messaging, products, assets, categories and images. Given that it is the landing page that users arrive at when they log in, the page should present users with attractive or popular content as an introduction to your platform.

To ensure an Organization is directed immediately to your homepage, you can select the targeted Organization(s) from the ‘Create Organization' in the homepage ‘edit’ mode located behind the Ecosystem Icon. Otherwise, you can click ‘Edit Organizations’ from an existing homepage.

If a homepage has not yet been configured and assigned to the relevant organization, users will be automatically directed to the Exchange.

Create the Homepage

1. Click on the Ecosystem Icon on the navigation bar.

2. Click Homepages.

3. Click Create Homepage.

4. Enter the following

   1. Name

   2. Page Code

   3. Organizations that you wish for this homepage will be applied to. A single organization cannot be allocated to more than one homepage.

5. Click Save Changes

When configuring your page code, you may use homepage_template.rtfd.zip which supports multiple content section types with configurable data (products, assets, categories etc.) 

Customise the Homepage

The default JSON code that enables the typical content provides users with an overview of what data assets are contained on the platform as well as some of their sources and categories. The homepage can be further curated using a custom block of JSON code.

In the default homepage JSON provided in the help box above, the code controls several distinct section types on the homepage. Templates may require slightly different information to populate with the right content, this could be simple copy, product/asset IDs or image URLs.

Edit the ‘Hero’ Section

The Hero section of your homepage is the top most section, characteristically displaying an image banner and some introductory copy. To update the content, replace the existing code with whatever you desire to be shown, such as, button text or headings.

Any section object will typically have the following fields to customise:

{
 "id": "Unique section identifier",
 "type": "Section type. Determines how the section configuration is displayed. This can be one of the following values: 'hero', 'categoriesOrTags', 'sectionGroup', 'assets', 'products', 'callToAction",
 "heading": "Section header text",
 "body": "Section main content text",
 "buttonText": "Link button text. Leave this blank to hide the button",
 "buttonHref": "Target url where the user is directed on clicking the button",
 "variant": "Determines the styling of the section. This can be one of the following values: 'dark', 'lighter', 'light', 'highlight'",
 "bgImage": "Url of section background image. Leave undefined to not have a background image",
 "bgVariant": "Determines the css styling of the background image. Can be either 'cover' or 'contain'"
}

Make sure to click save changes, before returning to the homepage to review.

It may be useful to note that [contain] will scale your image as large as possible within its container, without cropping or stretching the image. If the container is large than the image, this will result in image tiling unless the background-repeat property is set to no-repeat.

On the other hand, [cover] will scale the image while preserving its ratio, to the smallest possible size to fill the container, leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

Nest Additional Sections

When creating your homepage, you may require nesting capabilities to structure your content. Section type sectionGroup allows one level of nesting of grouped sections. It has the following structure:

{
  "id": "section-group-1",
  "type": "sectionGroup",
  "sections": [
    // insert child sections of type 'hero', 'categoriesOrTags', 'products', or 'callToAction' here
    {
      "id": "child-products-1",
      "productIds": [
        "product-id-1",
        "product-id-2"
      ],
      ...
    }
  ]
}

 Add Categories and Tags

Similar to designing the hero section, you can manipulate the JSON provided by the template to add up to six categories or tag images, which may represent objects such as data themes or the types of data suppliers hosted on your platform. Ecosystem Administrators can set the category and tag images in the associated tab behind the Ecosystem logo.

To add the categories and tags to the homepage:

1. Retrieve the category or Tag ID by inspecting the GET or categories response

2. Insert the category or tag ID into the template.

3. Ensure that the type value matches the ID type that you have supplied. For example, if you’ve supplied tag IDs, ensure that the ‘type’ value is ‘tag.’

{
  "id": "categories-1",
  "type": "categoriesOrTags",
  "heading": "Popular categories",
  "itemIds": [
    {
      "id": "0d4a48b1-e8dc-49de-a637-157abb99b4a8",
      "type": "tag"
    },
    {
      "id": "67255fd7-e9e2-4973-b7c5-5a6bf98ad179",
      "type": "category"
    }
  ]
}

Note that the allowed values for type in itemIds are ‘category’ or ‘tag’

Add Assets

You may also populate a section on your homepage with featured assets, effectively allowing users to view assets and access them based on the existing permissions. For an asset to be visible in this section, specific users will need to have permission for at least one consumption method (for instance, Spaces, Query, Export or Data Sharing). This is obtained through a subscription plan or direct asset sharing.

To add assets to populate this section, insert the asset IDs obtained from the Manage Asset page. As for the previous insertions, follow the this sample code:

{
  "id": "assets-1",
  "type": "assets",
  "heading": "Popular assets",
  "assetIds": [
    "<insert_asset_id>",
    "<insert_asset_id>",
    "<insert_asset_id>",
    "<insert_asset_id>",
    "<insert_asset_id>",
    "<insert_asset_id>",
    "<insert_asset_id>"
  ]
}, 

Add Data Products

As with data assets, by modifying the provided copy, Ecosystem Administrators can show popular data products, new products or otherwise on the Homepage. You may present up to four data products.

As with the inclusion of assets, you will need to insert the product IDs which can be obtained from the Manage Products page. To ensure the selected data products are visible to all users on the Homepage, ensure that all the referenced products have their visibility set to ‘All’ while packaging.

{
  "id": "<products-1>",
  "type": "products",
  "heading": "<insert_text>",
  "productIds": [
    "<insert_product_id>",
    "<insert_product_id>",
    "<insert_product_id>",
    "<insert_product_id>"
  ],
}

Add Copy alongside an Image

To set the image, you can supply a URL from the location where the image is originally hosted, for instance, on your website or domain. You can also follow these instructions to update the homepage footer, in a similar way.

1. Choose the image you would like to use and upload it to an image hosting service.

2. Once the image is successfully uploaded, copy the URL.

3. Insert the URL into the code. 

{
  "id": "call-to-action-1",
  "type": "callToAction",
  "heading": "<insert_text>",
  "body": “<insert_text>”,
  "variant": "dark",
  "buttonText": "<insert_text>",
  "buttonHref": "/exchange",
  "imageUrl": “<insert_url>”
}