SharpTools Docs

# Custom Tiles - HTML Type

# Overview

Selecting the HTML type for a Custom Tile provides a script editor interface in which you can write standard HTML, JavaScript, and CSS to build Custom Tiles. The HTML option also provides the option to define Tile Settings which you can then access within your JavaScript.

# Creating HTML Custom Tile

Since this is using standard web technologies, you can use existing libraries and frameworks – Bootstrap, React, Vue, Angular, Tailwind, etc. Or you can use regular (vanilla) HTML and JS.

# Settings

You can define settings for the Custom Tile which get exposed as additional options within the main dashboard interface when you edit a tile. To use these within your scripts, you’ll want to use our stio library as shown in the snippet below.

<script src="https://cdn.sharptools.io/js/custom-tiles.js"></script>
<script>
    stio.ready(function(data){
       console.log('The user specified token is', data.settings.token)
    });
</script>

TIP

There are a variety of functions such as showToast(), showList() and showForm() which are included in the stio library. Check out the stio library documentation for more details.

# Preview

When you use the ‘Preview’ button, it will render a copy of the tile below the script editor interface. If you have any Tile Settings defined, you’ll be prompted for which values you want to use for the settings (simulating what the tile would be like after the user adds the tile to their dashboard and configures it).

# Import Code

You can 'import' a Custom Tile by either manually copying in the HTML code or using a special import URL. If you copy in code with embedded settings, the system will automatically import tile settings (or prompt you to do so) once you tap out of the editor.

Import URL Format

https://sharptools.io/developer/custom-tiles/import/?url={{URL_TO_RAW_SOURCE_HTML}}

WARNING

Please be cautious when copying or importing the HTML code from others. Always review the code, and make sure you are comfortable with the implementation details. SharpTools does not review and is not responsible for the custom tile HTML shared by other developers.

# Update Imported Code

  1. Open your Custom Tile developer tools (opens new window)
  2. Select the custom tile that you imported previously
  3. Scroll down to the source code editor, tap the ⚙️ in the top-right corner of the code editor and select 'Update from Source'
    Update from Source Menu
  4. Scroll down and press Update at the bottom of the screen to save the changes
    Update Button

Looking for some inspiration? Check out the sample tiles we've put together:

EXAMPLES

Community Post: Sample Custom Tiles (opens new window)

← JS Library →