Table of Contents

Leveraging feeds in a web component

In this tutorial, you will learn how to embed another webpage directly into a dashboard or low-code app using a web component. You will also find out how you can configure HTML code, the language behind any web page, and you will explore how to utilize feeds to dynamically enhance both approaches.

In the tutorial, a low-code app is used, but this component works in exactly the same way in a dashboard.

Expected duration: 5 minutes

Note

The content and screenshots for this tutorial have been created with the DataMiner 10.4.5 web apps.

Tip

See also: Kata #34: Leverage feeds in a web component on DataMiner Dojo Video

Prerequisites

  • A DataMiner System that is connected to dataminer.services.

  • Version 10.4.5 or higher of the DataMiner web apps.

Overview

Step 1: Install the tutorial package

  1. Go to https://catalog.dataminer.services/details/7d78f8c4-323f-4d30-bc27-c9a7194c2f5f.

  2. Click the Deploy button to deploy the Dashboard web component tutorial package onto your DMS.

    This package contains a Web component tutorial low-code app and a GQI ad hoc data source with information about DataMiner katas.

Step 2: Configure static web components

  1. Go to your DataMiner landing page (e.g. https://myDataMiner/root/), and click the Web component tutorial low-code app.

  2. Go to edit mode.

  3. Make sure you are on the Static page. Depending on your DataMiner version, you may need to click the pencil icon next to the title "Static" on the left.

    On this page, you will find two assignments.

  4. Scroll down to the first assignment, which is to embed a web page by specifying a static URL:

    1. Click the web component to select it.

    2. On the right, open the Settings pane.

    3. Set Type to Webpage.

    4. Enter the URL of the website you would like to embed.

      For example, you could use https://docs.dataminer.services.

    5. Preview or publish the app to see the embedded webpage.

  5. Go back to edit mode and make sure you are again on the Static page. Depending on your DataMiner version, you may need to click the pencil icon next to "Static".

  6. Scroll down to the second assignment, which is to embed a web page by specifying custom HTML code:

    1. Click the web component, and open the Settings pane.

    2. Set Type to Custom HTML, and enter the desired HTML code.

      For example, you could enter <h1>Hello there!</h1>.

    3. Preview or publish the app to see your configured content.

Step 3: Leverage feeds

  1. Go to edit mode.

  2. Go to the Using feeds page of the low-code app. Depending on your DataMiner version, you may need to click the pencil icon next to the title "Using feeds" on the left.

    On this page, you will find a table component containing different katas and two assignments.

  3. In the first assignment, you will make sure the video linked to the item selected in the dropdown component is visualized in the web component:

    1. Click the web component, and open the Settings pane.

      You will notice a partial URL has already been entered.

    2. Place your mouse cursor at the end of the URL so that you can extend it, and type a curly bracket ("{") to show the feed intellisense.

      This will guide you in configuring a placeholder that will be replaced by the corresponding feed value.

    3. Enter {FEED."Current view"."Dropdown 2"."Selected item"."Query rows".VideoId} to link to the VideoId property of the item selected in the dropdown component.

    4. Preview or publish the app to see the selected kata embedded in the page.

  4. In the second assignment, you will make sure that in your HTML code, the title, the number of views, and the length of the video will be replaced by the title, the number of views, and the length of the video for the item selected in the dropdown component.

    1. Click the web component, and open the Settings pane.

      In the HTML box, you will see preconfigured HTML code.

    2. Make the following changes to the preconfigured HTML code:

      • In the <h1> tag, replace the static Title by the following feed placeholder: {FEED."Current view"."Dropdown 9"."Selected item"."Query rows".Title}.

      • In the <h2> tag, replace the static Views by the following feed placeholder: {FEED."Current view"."Dropdown 9"."Selected item"."Query rows".Views}.

      • In the <h2> tag, replace the static Duration by the following feed placeholder: {FEED."Current view"."Dropdown 9"."Selected item"."Query rows".Length}.

    3. Preview or publish the app to see the selected kata embedded in the page.

Learning paths

This tutorial is part of the following learning path:

Propose changes