Page Designer - News Tile

In order to use the News Tile, you will need to understand the nature of the tile. To help you achieve a deeper understanding, this article will address the following:

1. Tile Capability
2. Style & Behavior Options
3. Tile Data Sources - Video
4. Prerequisite SharePoint or Office 365 Configurations
5. Best Practices

Tile Capability

Summary: A News Tile displays and retrieves content from an Announcement List, a custom list, or a pages library within SharePoint. The tile has numerous capabilities but the primary function of the tile is to allow users to be able to display content in various (stylistic) ways. This is achieved by enabling users to customize the tile's style, behavior, and content.

Why the News Tile? In simplest terms, the News Tile enables strong connectivity and high engagement between numerous users. Whether users are a group of friends or business colleagues, the News Tile allows for display customization for a variety of content such as: News, Announcements, Events and/or Meetings. The New News Tile is intended to replace the Card Slider, News, and News List tiles, which are not denoted as "Legacy" tiles in the product. 

What the News Tile has to offer: The News tile enables display customization of content from a custom list (or an Announcements List) that has a Title, Image and Content field. However, it does not support pinned and critical fields. The tile enables display customization which allow users to configure its functionality and visual appearance.

Style & Behavior Options

<href=#style&behavior

Summary: In order to utilize the new News Tile, you will need to create a suitable list, such as an Announcements List, or point to an existing one. The News Tile retrieves and displays content from a list within SharePoint. An Announcements List is a template list that is intended to be used with the News Tile. The Announcements List also prepares the necessary custom fields for the News tile.

• Title - Gives the title for the news item. This field needs to be text.

• Content - Used to store textual content for the news item.

• Image - Used to store the image or the link to the image. This field needs to be an image or a hyperlink.

Settings: The News Tile Settings window is where users can customize the tile's display layout. In this window, users can configure and customize different visual features of the tile. 

To Open News Tile Settings, click on the gear symbol located at the top left of the tile. You should now be able to recognize that there are seven tabs within News Tile Settings. Although each tab is important, the main driving force between the display styles will belong to the View tab and the General tab.

The View tab allows users can group specific List Layouts with specific Item Layouts & Image Styles to display content in stylistic ways. By navigating through View tab, users will see that they are given the option of selecting from three separate List Layouts (Stacked, List, Slider). The settings that are within the View tab will change with respect to the selected List Layout. For instance: 

If a user decides to switch from a Stacked List Layout to a Slider List Layout, he/she will recognize that by selecting the Slider List Layout, the tile will enable different settings. In this case, something like the AutoPlaySpeed setting is enabled. There is no particular need for the AutoPlaySpeed setting for a Stacked List Layout. 

Similarly, the General tab options change with respect to the selected canvas type. If for instance, a user selects a Responsive Canvas type, the option (toggle) AutoHeight is enabled as it is exclusive to the Responsive Canvas Type.  

The remaining 5 tabs (Font, Data, Links, Tile Behavior, Advanced) are consistent and are independent of the selected Layout.  For that reason, this article will focus on the View and General tab and how users can navigate into these tabs to customize the tile's display layout. To learn more about the remaining 5 tabs within News Tile Settings, consider the following:

Learn more about the Font tab
Learn more about the Data tabLearn more about the Links tab
Learn more about the Layout tab and/or Tile Behavior tab
Learn more about the Advance tab

The General tab allow a user to adjust many of the visual features of the News Tile. It is important to keep track of these settings as a number of them contains numeric values or codes (for instance, color values & opacity levels). It is also important to remember that some of the modifiable features (width, height, etc.) are exclusive to particular canvases. The few that are dependent on specific canvases are marked with their respective canvas type.  

Width
Adjusts the width of the tile in pixels (Fixed Width Canvas Only). 

Auto Height
Default selection on Responsive Canvas Type. The primary function of this feature is to automatically adjust the height of the tile based on the content available (Responsive Canvas Only)

Advanced Styles
For more information on Advanced Styles (A.S.), refer to the article that discusses the features of A.S.. Advanced Styles will almost always be under the General Tab.

Height
Adjusts the height of the tile in pixels.

Feature Color
Adjusts the feature color of the optional header bar and background color of list items that do not include images. 

Background Color
Changes the background color of the tile using the color picker.

Date Format
Modifies how the dates are displayed on the tile. The following example illustrates the different styles a date can be displayed:

• 6/20/2018
• June 20, 2018
• June 20, 2018 11:57 AM
• Wed, June 20, 2018, 11:57 AM

Hover Effect
Adds various hover effects when a list item has the cursor over it. 

Show Header Bar
This toggle enables a header bar to be displayed above the contents of the tile. Enabling this toggle will display a Header Text setting Header Text:

• Header Text - Responsible for the title on the Header Bar.

Show Views
This toggle enables the number of views a list item has to be shown. Note that the views users will be able to toggle must be selected from the Data Tab under End-User Toggle Views.

Number of Items to Retrieve
Sets the number of items that will be displayed in the list.

Retrieve Additional Items on Scroll
Once a user has scrolled through the number of items set in the previous setting (Number of Items to Retrieve), toggling the Additional items on Scroll will populate another amount of items set by the items to retrieve setting.

The View Tab is for display customization. While the General Tab controls more of the visual aesthetics, the View Tab controls the displayed content and how its presented. 

List Layout
Choose between a stacked, list, or slider layout for how content is displayed. Depending on the selected list layout, A number of the settings feature within the View tab are dependent on the List Layout, therefore they will only become accessible for the selected List Layouts. 

• Stacked will contain settings for Margins Between Items and Margin Color.
• List will contain a toggle setting for Border.  
• Slider will contain settings for an Autoplay toggle and Autoplay Speed.

Margins Between Items (Stacked)
When the List Layout is set to Stacked, this setting appears. Toggling this setting off will remove the margin spacing between each list item.

Margin Color (Stacked)
When the List Layout is set to Stacked, this setting appears.  This sets the color of the margins between the list items using a color picker.

Border (List)
When the List Layout is set to List, this setting appears.  Toggling the border off will remove all border lines from the list items.

Autoplay toggle (Slider)
When the List Layout is set to Slider, this setting appears. When Autoplay is toggled on, the list items will autoplay based on the amount of time set by the Autoplay Speed setting.

Autoplay Speed (Slider)
When the List Layout is set to Slider, and the Autoplay toggle is enabled, this setting appears. This setting determines the amount of time that needs to pass in order for the tile to switch between list items.  It is bound to 5, 10, and 15 seconds.

Item Layout
This setting determines how a list presents the information. The layouts available are:

• Vertical
• Horizontal
• Overlay
• Image Only (Selecting Image Only will hide the Content Height setting).

Content Height
When the Item Layout is set to either Vertical, Horizontal, or Overlay, this setting will appear.  It determines the height in pixels for each list item.

Padding Around Items
When toggled, this setting will place padding between list items.

Image Style
The Image Style will change how images are displayed in lists. The available options are:

• None
• Square
• Rectangular
• Widescreen
• Round

Display Customization

The main advantage the News Tile has over the News (Legacy) and News List (Legacy) Tiles is that the News Tile allows more display customization.

With the News Tile, the appearance of a news gallery, card slider, list or other style combinations can be created simply by modifying the tile settings.

The following examples are some of our popular user preferences:

The News Stacked This is displayed with a Stacked List Layout w/ Overlay Item Layout. 

________________________________________________________________________________________________________________

The News List This is displayed with a List Layout w/ Vertical Item Layout

The News Slider This is displayed with a Slider List Layout w/ Overlay Item Layout

 __________________________________________________________________________

Tile Data Sources

Summary: The News Tile displays content from either an announcement list or a custom list. In other words, the tile retrieves its displayed information from the data that is stored within announcement lists.

As mentioned earlier, the News Tile requires three particular column fields (provided with the Announcement List template app). The News Tile can also retrieve its data from a custom list. 

For a better understanding, consider the following example exercise:  

• Open and start from your LiveTiles SharePoint home site. Find your Announcements List that you have created earlier and click on it. Verify that it is an Announcements (Type) List.  

• Click + New at the top left of the header. Notice the Side Navigation Menu options for creating a list object. The Title, Body and Attachments serve as the Title, Content and Image, respectively.

• Name list figure, enter the content (text), and add an image as an attachment. Click Save. You have now created a list item.

Important Note: The News Tile displays list items within an Announcements List. The source of the data of a News Tile is from an Announcements List or a Custom List. This tile does not support pinned and critical fields (which are custom lists).

Prerequisite SharePoint Configurations

An Announcements List, other SharePoint List, or Pages Library configured with columns for Header(Title), Content(Body/Description), and an *Image(picture). 

*Note that with images the News Tile can be configured to render an image based on an attachment or a URL.

Best Practices

Images

When using images, make sure you are using the right size images for the aspect ration they will be displayed in.

For example, when set to display as rectangles, the aspect ratio for an image will be 16:9. However, when set display as squares this aspect ratio changes to 1:1. 

Columns

The News List tile is fairly flexible and can be linked out to a variety of list, such as a contact list. Just make sure the requisite site columns are properly linked to the fields that will be displayed.

For example, in the case of a contacts list Full Name would be linked to the Title Field, Notes to the Content(Body) field, and so on and so forth. 

Font Styling

Always make sure that your font color for your content is visible over the background color and whatever highlight color you may have added. 

Display Style

When choosing whether to display content vertically, horizontally, or as an overlay, the most import thing to consider how much of the content will be displayed. If the too much of the text is cutoff or too much of the image obscured by text, it is a good idea to select a different view.