Designing Sections and Tiles

Creating a Section

You can create a section either using the Section Assignments tab on the Content Ref Administration page or you can create section templates and import them.

Refer to the following topics for more information on creating sections: (Fluid only) Creating Sections on Fluid Homepages and Managing Section Templates and Sections.

Designing Visual Forms of Sections

You use the delivered styles and CSS variables applicable at the level of a section to add granular styling to the section. The styles and CSS variables are described in the preceding topics. Based on your business requirements, you can style sections to span the entire width of the homepage or specify a fixed width for the section, which can grow vertically as you add tiles in the section, or you can lay the sections side-by-side.

Additionally, you can design each sections to be unique in its look and feel by applying specific background color, border, icon, and so on.

The following example shows some of the visual forms of sections.

This example illustrates some of the visual forms of sections.

Creating Tiles Statically

You can create a tile using the Tile Wizard or you can manually create tile content references.

Refer to the following topics for more information on creating tiles: Using Tile Wizard and Creating and Maintaining Tile Definitions Manually.

Creating Tiles Dynamically

You can create tiles dynamically and load these tiles into a section using the delivered base class: PTNUI:Dynamic:DynamicLoader. As these tiles are dynamically created, they do not have a tile content reference.

Typically, you would create tiles dynamically in this manner:

• Create an application class, which is an extension to the base class PTNUI:Dynamic:DynamicLoader.

• Use the LoadSection method to load a section.

• Use the CreateTile or CreateTileUsingTab methods to define a tile.

• Use the AddTileToSection method to add the tile to the section.

The following code snippet creates a standard tile with title and image:

method LoadSection
   /+ Extends/implements PTNUI:Dynamic:DynamicLoader.LoadSection +/
   Local PTNUI:Model:Tile &oTile;
   
   &oTile = %This.CreateTileUsingTab("", "Team Calendar");
   &oTile.RowNum = %This.GetNextRowNumber();
   &oTile.GltImageName = Image.TEAM_CALENDAR;
   %This.SetupFluidTarget(&oTile, GenerateComponentContentURL(%This.Tab.PortalName, %This.Tab.NodeName, MenuName.MYMENU, %Market, Component.MYCOMPONENT, Page.MYPAGE, %Action_UpdateDisplay));
   
   %This.AddTileToSection(&oTile);   
end-method;

For a detailed description of the DynamicLoader class and its methods, see DynamicLoader Class Methods.

Tile Presented as a Button

This is a special tile that can be configured as a button instead of the default rendering as a link. You must ensure that it is the first tile in a section for tab ordering. You can use the tile to open a modeless window, which enables users to configure or personalize the section. Special styling is applied to the tile to make it appear in the upper-right corner of a section.

Special properties must be applied to a tile for the tile to behave as a button. These properties are applicable to both statically defined tiles and dynamically generated tiles.

To configure a tile as a button, complete these steps:

1. If you're using an application class to dynamically create the tile by extending the DynamicLoader class, set the following properties:

   • Use the Tile.IsButtonRole property and set it to True.

   • Use the Tile.IsNotTile property and set it to True.

   • Use the Tile.StyleClasses property and specify the psc_section-action-button attribute.

   • Use the Tile.UseAltText property and set it to True. If you are using only an image for the button, ensure that the alternate text and title are populated with the text of the tile label.

   If you are creating a statically defined tile, in the tile definition, select the following check boxes on the Fluid Attributes tab:

   • Identify Tile as a Button

   • Use Alternate Text on Tile Image

2. Update the homepage content reference to include the psc_section-action-button value for the PS_STYLECLASSES attribute in the Section Attributes area on the Section Assignments page.

The following sample code shows the properties for the tile.

&oTile = %This.CreateTileUsingTab("", "Edit Suggested Actions");
   &oTile.RowNum = 1;
   &oTile.GltImageName = Image.MYIMAGE;
   &oTile.UseAltText = True;
   &oTile.IsButtonRole = True;
   &oTile.IsNotTile = True;
   &oTile.DisplayIn = %GroupletActionInModal;
   &oTile.StyleClasses = "psc_theme-tile-transparent;psc_section-action-button"; 
   &oTile.IncludeSourceInUrl = True;
   %This.SetupFluidTarget(&oTile, GenerateComponentContentURL(%This.Tab.PortalName, %This.Tab.NodeName, MenuName.MYMENU, %Market, Component.MYCOMPONENT, Page.MYPAGE, %Action_UpdateDisplay));
   %This.AddTileToSection(&oTile);

The sample PeopleCode creates a tile presented as a button:

Example of a tile displayed as a button.

See Applying Styles from Delivered Style Sheets and Styling Homepages and Dashboards Using CSS Variables for information on styles and CSS variables that can be applied to sections and tiles.

Tile Presented as a Link

You can create a tile to display as a link (hyperlink). Special properties have to be applied to the tile to behave as a link. These properties and styles are discussed in preceding topics.

• At the tile level, use the psc_tile-simple-link style class to convert a tile to a hyperlink.

• At the section level, use the psc_section-link-collection style class, which converts all tiles in the section into a collection of links displayed vertically.

• Use the Tile.IsNotTile property and set it to True.

The following sample code creates a tile that is presented as a link. At the section level, the psc_section-link-collection style class is applied which presents the tiles as links.

&oTile = %This.CreateTileUsingTab("", "My Team");
   &oTile.RowNum = %This.GetNextRowNumber();
   &oTile.IsNotTile = True;
   %This.SetupFluidTarget(&oTile, GenerateComponentContentURL(%This.Tab.PortalName, %This.Tab.NodeName, MenuName.MYMENU, %Market, Component.MYCOMPONENT, Page.MYPAGE, %Action_UpdateDisplay));
   %This.AddTileToSection(&oTile); 

Example of tiles displayed as links.

See Applying Styles from Delivered Style Sheets and Styling Homepages and Dashboards Using CSS Variables for information on styles and CSS variables that can be applied to sections and tiles.

Standard Tiles

Standard tiles are tiles with image and text or tiles with live data. However, the visual presentation of these tiles can be changed by applying appropriate styles. For example, tiles can be displayed as a collection with a separator line, a tile can span the width of a section; a tile can display secondary text in addition to the main text.

See Applying Styles from Delivered Style Sheets and Styling Homepages and Dashboards Using CSS Variables for information on styles and CSS variables that can be applied to sections and tiles.

Example of standard tiles.