This article will address the following:
- Modal Windows and Sliders Overview
- Style and Behavior Options (Settings)
- Restrictions and Best Practices
Modal Windows and Sliders Overview
Summary: Some Tiles within the LiveTiles product are designed to be responsive to user interaction as they are exclusive to the Responsive Design Canvas. Most Tiles display content by retrieving the data from different sources such as SharePoint and Office 365 Delve. Modal Windows and Sliders are two examples of how users can open source information without having to leave the page. A modal dialog is a smaller window that opens within a page so that the user can interact without leaving the parent application.
Example? A great example of this would be a prompt for saving, or the "open file" dialog. You can configure the style and behavior of Modal Windows and Sliders. Another example of this would be our New News Tile. The New News Tile displays the full-extent of content that is previewed within the Tile. A Modal Dialog window appears on-click and displays the full article or content.
Style and Behavior Options (Settings)
Summary: In most cases, tiles that contain the Modal Windows and Sliders feature would have their options within the Links Tab. It is within this tab that users can configure the style and behavior of their Modal Dialog Window or Slider. Typically within the Links Tab, you will see options that allow you to configure some of the features of the Modal Windows and Sliders.
What are my options? Within the Links Tab, users can select from four different Click (or Click Target) options. Depending on the selected Click Target option, there will be separate options. This article will discuss the Modal Dialogue option and the Slide option.
Settings: This sub-section will discuss the style and behavior option for each of the following Click Targets: Modal Dialogue and Slide.
If you selected the Modal Dialog option for the Click Target, you will see that you can now configure the Modal Width, the Modal Height, and the Modal Style. While the Modal Width and Height are relatively straightforward, Modal Style may require a little more explanation and/or clarification. Here are the four Modal Styles:
- Frameless - This option will display the tile's modal dialog window without a frame.
- Framed - This option will display the tile's modal dialog window with a frame.
- SharePoint - This option shows the intended link in the standard SharePoint modal window.
Note: The best practices around which style to use should depends on the overall style, design, and behavior of the rest of the elements within that page.
If you selected the Slide option for Click Target, you will see that you can now configure the Slide Position and and Width.
- Slide Position - Select whether to have the window slide in from the left or the right. As a best practice, consider the rest of the page's function and behavior, along with some stylistic/preference outlooks.
- Slide Width - Set the width (in pixels) of the slide window. A good example of when to really consider the width is if you have a News Tile with lengthy (word-heavy) documents, it would be in best practice to increase the width of the slide window for easier readability.
Restrictions and Best Practices
In order to use a modal window or a slider, for an external site, you will need to include https:// in front of the site in which you will need to point to, in addition you will need to make sure that the site you want to link to, is able to be put into an iframe. As modal windows and sliders both use iframes, if a page does not have this option, it will not work.
Exclusive to frameless and the sliders, SharePoint lists do not work with these pages. If you are linking to a SharePoint list, you will need to use either the framed or SharePoint modal windows. In addition, if the website you are linking to is not responsive, these frames will not work, as these windows do not scale.