Custom tile editor

How to Use

Once the custom tile is placed onto your page, you will be able to create a new tile/place custom code onto your page by using the code option. In addition, you will be able to use variables that you creating under the New Configuration Options by referencing them in your code. This tile will also allow you to lock it so that users in the designers group will see only the options for this tile, allowing you to be able to treat the custom tile with the code created for it as a normal tile for designers.

In order to call in custom variables/configuration, you will need to add customConfig.(insert variable here) in order to call it in your code, this will allow you to be able to call the thing

Settings

Tile

Width: Allows you to set the width of the tile.

Height: Allows you to set the height of the tile.

Background Color: Allows you to set the height of the colour

Custom Configuration: Shows the options you have set up via custom configuration options which you can call via the code for the tile you are creating.

New Configuration Option: Allows you to set up a custom configuation option via the following options

  • Label: Shows a descriptive title for the configuration option.
  • Variable Name: This will be the name for the configuration option you will call in your code.
  • Type: Allows you to choose what type of variable this is (String, Number, Color, Checkbox)

Code

Allow Designers to Edit Code and Configuration Option: If this is selected, Both users in the Designers and Owners group will be able to edit the code for the tile. If this is de-selected, only users in the Owners group will be able to edit the code and configuration options

Run Code in Sandbox Mode: Allows the user to opt to run the tile in Sandbox Mode, When enabled this embeds the custom html code in an iframe.

Edit Code: Opens up the full screen coding experience. This will allow you to be able to work on your tile via HTML, CSS and Javascript.

Layout

Layer – Changes the depth of the tiles within the page. Selectable via drop-down either Foreground, Background or Custom.

Reorder Within Layer - Changes the depth of the tiles within the layer. Selectable via drop-down either ‘No Change’, ‘Bring to Front’ or ‘Send to Back’.

Advanced

Tile Visibility – Changes which groups can or cannot view the tile. Selectable via dropdown either Everyone, ‘Only for’ or ‘For everyone except’. When ‘Only for’ or ‘For everyone except’ is selected, a dropdown menu will appear where you can assign groups to the category that was selected.

Lock Tile for Non-owners – Toggles whether only tile can be only modified by an owner.

Custom CSS Classes: This section allows you to add multiple Custom CSS classes to the product, allowing you to be able to add custom CSS classes to the tile.

Did this answer your question?