Vizlib Home Try Vizlib

Vizlib Tiles Guides - Tile Editor

Vizlib Tiles has a Tile Editor to make layout changes to your tiles and apply them quickly (Figure 1). 



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 should see a block layout appear, with 3 tabs - Header, Body and Footer (Figure 3). In each tab, a block represents a measure from the property panel Data section, e.g. Title, Description, Image. 
  • You can use the Display Mode button to switch between a basic component view or a WYSIWYG view of the tile's appearance in the chart. You can see the WYSIWIG view in the Example in Figure 1, while the rest of the guide uses the basic view. 
  • Use the Zoom controls  to make the layout in the tab larger or smaller.

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 greyed out). 

Figure 3: Tile Editor

Back to Contents

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 button to open the Position settings and enter the changes manually (see the Data article for more details). In this example, we're moving Product to the top left corner of the Body
  • 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

Note on Displaying Outside Tile Borders: You can also enable Display out of bounds in the editor in the menu opened with the button, or in the property panel (Figure 5). You'll find it in Measure settings under the Position section, so for this example you'd find it in Product

Figure 5: Display Out of Bounds

Back to Contents

Applying Layout Changes

  • Click Apply to save your changes to the sheet. You can see Product has moved from the top right to top left corner of the tile (Figure 6). 

Figure 6: Tile Edits Applied

Back to Contents

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.