Tile Editor

Quickly make and apply changes to your tiles using the Tile Editor in Vizlib Tiles (Figure 1).

This topic contains the following sections:

Tile Editor Overview

The Tiles Editor, part of the Vizlib Self-Service product extensions, streamlines the visualization experience for application creators.

The Tile Editor replaces the Data property panel menu for creating and updating an object's properties in Tiles.

  1. View the property panel options by clicking on the magic wand icon in the bottom right of your Tiles Editor.

  2. Click on the Tile Preview tab to view the settings.

  3. Click to add or amend the formatting choices for the tile.

  4. Click Apply to save your changes.

Quick Tips

  • Settings that apply to all objects are shown at the top of the page.

  • Detailed settings for text, images, and lines display on the right-hand side.

Figure 1: Tile Editor Example

Getting Started

To start using the Tile Editor, put your sheet into Edit mode, then click the tile editor button in the bottom right of the screen (Figure 2).

Figure 2: Tile Editor Button

  • When the Tile Editor opens, you will see a preview of the first tile: Header, Body and Footer (Figure 3). If Header and Footer is gray, it is probably because they are disabled in the property panel. Simply activate them there and then open the editor to be able to choose them.

  • You can use the Display Mode button to switch between a basic component view or a WYSIWYG (What You See Is What You Get) view of the tile's appearance in the chart. You can see the WYSIWIG view in the example in Figure 1.

  • Use the Zoom controls to make the layout in the tab larger or smaller.

  • Use the buttons at the bottom of the editor to switch between the different Tiles This allows you to see how different Tiles look and not just the first one. The number of Tiles you can see this way is limited to how many where loaded to show the first page.

Note: You can only edit a tab if you have added an element (e.g. if no elements are added to the footer, the footer tab will be grayed out, just like when it is inactivated).

Figure 3: Tile Editor

Changing the Tile Layout

  • To change the Tile layout, you can either use the cursor to drag and drop the element to the location you want (Figure 4), or use the position settings in the top menu and enter the changes manually. In this example, we're moving the image to get a nicer positioning and then fine-tune the position by setting the exact position with numbers.

  • You can also right-click on the element to open a menu of available options:

    • Bring to front moves the element to the top layer, while Bring forward moves the element forward by one layer.

    • Send to back moves the element to the bottom layer, while Send backwards moves the element back by one layer.

    • You can also choose Toggle to display out of bounds which allows the element to be displayed outside the tile border, and also Duplicate the element.

Figure 4: Moving a Tile Layer

After using right-click to enable out of bounds, objects can be positioned outside the Tile. Make sure you have enough surrounding space to make this look nice (Figure 5).

Figure 5: Display Out of Bounds

Applying Layout Changes

  • Click Apply to save your changes to the sheet. Cancel will revert to as the settings were before the editor was opened.