Skip to content

HTML Dashlet

This page describes the process of creating a HTML Dashlet that looks as follows. This dashlet contains raw HTML, CSS and images that reference Mythradon hosted images from your image library.

The actual content for this dashlet was taken from the W3Schools How To Site. We are simply using this as an example on how to create a HTML Dashlet in Mythradon.

W3Schools

There are three images on this W3Schools sample site:

Jane Doe

Jane Doe

Mike Ross

Mike Ross

John Doe

John Doe

For the sake of this example we will use the same images, however you can use whatever images you like.

From the W3Schools How To Site, use your browsers image save feature (on Windows machines this is usually the right mouse button menu). Click on each image an save a local copy.

Save Jane Doe Image

In order to link these images into our HTML dashlet we need to save them into the Mythradon Image Library.

Create Image Folder

Before we save the images into the Mythradon Image Library we will create a folder to catalog our images.

  • Select the Images page/tab from the Main Menu
  • Click the Vertical Ellipsis button to the right of the Create Image button
  • Click the Manage Folders button from the drop down menu

Manage Folders - Light Manage Folders - Dark

  • Click the + button to create a new folder

Create Image Folders - Light Create Image Folders - Dark

  • Provide a name for your folder such as Dashlet Images and click the Save button
  • You will now see your new folder in the Image Folder List View. Click the Images button to return the list of images.

Image Folder List View - Light Image Folder List View - Dark

Add Images to the Image Library

  • Select the Images from the Main Menu
  • From the Image List View, click Create Image button
  • Select your image and click Save

Repeat this process for all three images.

Create Images - Light Create Images - Dark

Your images are now available for use in your HTML Dashlet, however we need to extract the link name from the Image Library for use in the HTML code on the dashlet.

  • From the Image List View, select an image. This will display the image details.
  • Click on the actual image to see a larger view of image
  • Use your browser features to copy the link to the image as per the following image:

Copy Image Address - Light Copy Image Address - Dark

  • Paste this link into a text editor such as Notepad. We will need this later when creating the HTML dashlet.

Repeat this process for all three images. You list of links will look something similar to the following:

Image URL
Jane Doe https://my.Mythradon.com/?entryPoint=image&id=61582a8307e79a64b
Mike Ross https://my.Mythradon.com/?entryPoint=image&id=61582a9ae8e20bc6d
John Doe https://my.Mythradon.com/?entryPoint=image&id=61582aa72849ba2c3

Note

These values are examples. They will not work in your system. You need to follow the instructions above and create your own instances of these links from your system.

Create HTML Dashlet

Now we have all the images ready we can create the HTML dashlet.

  • Select the Home page/tab from the Main Menu
  • Click Add Dashlet button
  • Select HTML as the dashlet type
  • Provide an appropriate Title and add the following HTML and CSS that has been extracted from the W3Schools sample
  • Click the Save button and the HTML dashlet will automatically display
  • Use your mouse to drag the bottom-right corner of the HTML dashlet to size as required

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 8px;
}

.about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
</style>
</head>
<body>

<div class="about-section">
  <h1>About Us Page</h1>
  <p>Some text about who we are and what we do.</p>
  <p>Resize the browser window to see that this page is responsive by the way.</p>
</div>

<h2 style="text-align:center">Our Team</h2>
<div class="row">
  <div class="column">
    <div class="card">
      <img src="/w3images/team1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Jane Doe</h2>
        <p class="title">CEO & Founder</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>jane@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="/w3images/team2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>Mike Ross</h2>
        <p class="title">Art Director</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>mike@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="/w3images/team3.jpg" alt="John" style="width:100%">
      <div class="container">
        <h2>John Doe</h2>
        <p class="title">Designer</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>john@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

HTML Dashlet without Images - Light HTML Dashlet without Images - Dark

You will note that the images are not displayed.

We need to edit the HTML code and replace the URLs used for the images with the ones we have recorded in our Notepad/text editor.

  • Click the Ellipsis button to the right of the HTML Dashlet and select Options

Edit HTML Dashlet - Light Edit HTML Dashlet - Dark

  • Scroll through the HTML code and make the following code replacements using your image URL id values captured in the previous section on this page.

Jane Doe

Find:

<img src="/w3images/team1.jpg" alt="Jane" style="width:100%">

Replace with:

<img src="./?entryPoint=image&id=61582a8307e79a64b" alt="Jane" style="width:100%">

Mike Ross

Find:

<img src="/w3images/team2.jpg" alt="Mike" style="width:100%">

Replace with:

<img src="./?entryPoint=image&id=61582a9ae8e20bc6d" alt="Mike" style="width:100%">

John Doe

Find:

<img src="/w3images/team3.jpg" alt="John" style="width:100%">

Replace with:

<img src="./?entryPoint=image&id=61582aa72849ba2c3" alt="John" style="width:100%">
  • Click the Apply button

Note

The use of the . at the start of the path of the URL. This allows us to drop the fully qualified domain name and use a relative URL to the current system domain.

Our HTML dashlet should now be complete and look similar to the following. Note we have not described how to make the Contact buttons at the bottom of each image perform any specific action, however you could add JavaScript to the page to perform any necessary action.

HTML Dashlet - Light HTML Dashlet - Dark

Note

If you are migrating code from DEV/Test into another instance of Mythradon you will most likely need to use a different set of ID values for the Images in each environment.

See Also