Overview

The Documents Tile gives user the ability to view and interact with files stored in their LiveTiles Cloud site or in Enterprise Box, if you have enabled that integration. 

Configuring the Documents Tile

The tile can be added to the design canvas by clicking and dragging the Documents tile from the Tile Gallery. You will find the Documents tile in the Tile Gallery under the Category "Documents".  

Like all tiles, the tile can be deleted, saved, duplicated, or configured through the context menu that appears when clicking on or tabbing to the tile in the design canvas.

Configure

Various settings of the tile can be configured by clicking on the Settings icon. From here you can edit font and styling, add data sources, and choose responsive behaviors.  

See Tile Settings for more details.

Duplicate

To duplicate a tile click the Duplicate icon. All current configurations will be copied over to the new tile.

Save

To save the tile click the Save Tile icon. This will save the current configuration of the tile to the Tile Gallery.

Delete

To remove the tile from the canvas click the Delete icon.

Tile Settings

Click the Settings icon to open the tile settings.

Note: The tile settings may vary depending on your environment.

General 

These are default display settings which are applied to most tiles.


Width: Adjust the width of the tile in pixels. This must be a positive whole number, otherwise the default will be 10 pixels. This is only available on a Fixed Width canvas, which is selected on page creation.

Height: Adjust the height of the tile in pixels. This must be a positive whole number, otherwise the default will be 10 pixels.

Header Color: Use the color picker to add or change the tile header's background color. We recognize transparency for the background color.

Advanced Styles: To adjust borders, corner radius, and drop shadows click on ‘Advanced Styles’ to expand and view the options.

  • Border Width: The default for this tile is no border. To add one select a displayed width. Once a border is chosen an option will appear to select the border color.
  • Corners:  You may choose Square (default), or rounded corners of varying pixel widths. If you select Round for the corners an option will appear to select which corners it will be applied to (all, top, or bottom)
  • Drop Shadow:  Checking this option will add a soft, semi-transparent drop shadow to the tile.

Text 

The Text tab allows you to configure the text and font options for the tile.

Title: The default for this tile is My Documents. Erase the default text to add your own title.

Header and Body Font Options:
These sections contain the configuration options for the text of the header or body of the tile, respectively.

  • Override Page Font: To use your own font, select this box. You may choose from fonts available to all LiveTiles platforms or you may choose Custom to enter a font-family already loaded into your page.
  • Font Size: Choose a whole number between 10 and 30 pixels.
  • Font Color:  Use the color picker to change the font color. We recognize transparency on fonts. 
  • Font Style: Italicize or underline the header text by checking the respective boxes.
  • Font Weight: To change the weight of the font select between Light, Normal, or Bold.

Data

The Data tab allows you to add and configure your data source.

Data Service: Choose the data source for the tile.

  • LiveTiles Cloud: Data sourced from your Azure site.
  • Box: Data sourced from your Enterprise Box account. This is only available with the Enterprise version of LiveTiles Page Designer for Azure. To find out more read about Native Box Integration.

If LiveTiles Cloud Data Service is selected:

Source: Choose between three possible scopes.

  • Personal Documents: This will only reflect documents that can be accessed and are scoped to the user viewing the tile. The documents scoped to a user will reset if a user is deleted and re-added to the site..
  • Public for Space: This will reflect any accessible documents scoped to the current space and make any added documents accessible from any page within the space.
  • Public for Site: This will reflect any accessible documents scoped to the current site and make any added documents accessible from any page within the site.

Starting Folder: This allows the designer to set the “top level” folder for the documents tile navigation. The input field must start with a forward slash ‘/’ and is case sensitive.

  • If Box is selected as a Data Service: 

To set this for Box select the search icon and choose a folder from the Box hierarchy. It is highly recommended to add a starting folder to have the full set of functionalities within the tile.

Disable Upload and Delete: Checking this will remove the ability for the end user to upload or make changes to files within the tile.

Links 

The links tab allows you to configure the view when a user opens a document.
 
File Click Target:  Choose between the given options to indicate how the file preview will appear. Some documents cannot be previewed and will download instead. This is dependent on the user’s browser, operating system, and application configuration.

Modal Dialog: When selected as the File Click Target additional configurations will appear.

  • Modal Width: Adjust the width of the modal dialog. The default value is 800 pixels.
  • Modal Height:  Adjust the width of the modal dialog. The default value is 600 pixels.
  • Modal Style:  Select Frameless or Framed modal style.

Frameless:

Framed


Slide: If Slide is selected as the File Click Target, additional configuration fields will appear.

  • Slide Position: Choose between Left or Right to select which side of the window the slide will enter from.
  • Slide Width:  Adjust the width of the slide. The default width is 400 pixels. The width is controlled by setting the CSS max-width property.

*Tile Behavior

 The Tile Behavior tab allows the designer to configure the visibility of the tile depending on the screen width.

*The Tile Behavior tab is only available on the Responsive canvas.

Show on Large Devices: Tile will appear on widths greater than 1200 pixels
Show on Medium Devices:
Tile will appear at widths between 992 and 1200 pixels
Show on Small Devices:
Tile will appear at widths between 768 up to 992 pixels
Show on Extra-Small Devices:
Tile will appear at widths up to 767 pixels.


*Layout

 It allows the designer to configure the layering of the tile against the other elements on the page.

* The Layout tab is only available on the fixed-width canvas.

Layer: Adjust to choose if the layer is part of the foreground (closest to view), background, or a Custom.
Custom: If this is selected additional configurations will appear.

  • Z-Index:  This will set the CSS z-index property on the tile. By default it is 50 pixels.

 

Reorder Within Layer: Adjust this to send the chosen layer to the Front or the Back.

Advanced

The advanced tab will allow a designer to access more complicated settings for the tile. Recommended for experienced users.

Tile Visibility: Currently this setting can only be “Everyone” as it is not yet configured to work with Okta or Active Directory groups.
Lock Tile for Non-Owners: Check this box to only allow space owners or site administrators to modify the tile settings.
Custom CSS Classes: This is recommended only for those with previous coding experience. To use custom code enter custom CSS classes here separated with a space. Do not use lt-, ltc-, or ltd- in your class names.

End User

In the end user view you can use the Documents Tile can be navigate, search, and sort visible documents. If configured, the user can also upload documents or create new folders. Around 500 results will load into view at one time, with paging provided to load more.

Clicking an individual document will open or download it depending on the configurations in the Link Target of the Tile Settings. In most cases, the default action will be download.

Search: Click the magnify glass icon  to search the documents scoped to the tile as defined within the tile settings.

Upload:  
When enabled, the click the upload icon to add a file. A file explorer will open allowing the user to select one or more files to upload to the selected folder.

  • Multiple Uploads: The upload limit is around 20 uploads at one time.
  • Overwrite: File names must be unique. If a duplicate file is uploaded, the user will receive an alert asking if they want to overwrite the existing file.

New:  Select New to add a folder to the preset scope of the documents tile. The user will be prompted to create a new folder name which must be unique within the chosen folder. 

Ex: Folder 1 cannot have two sub folders named ‘Test’. But Folder 1 and Folder 2 can each have a folder inside titled ‘Test’.

List and Card View: The documents view layout can be changed by selecting the List icon (default) or the Card icon 

  • List: When selected the column headers can be clicked to change the sorting of the documents. 
  • Card: When selected the cards can be sorted by the Sort By dropdown above the contents.


Ellipsis Menu
: Hover the mouse over a desired document to see the ellipsis menu. Additional actions can be accessed here.

  • Folders: Currently only a delete action is available for folders from the ellipsis menu. At this time folders cannot be downloaded.
  • Files: Delete, download or share the selected file from the ellipsis menu.


 

Did this answer your question?