7.1 Reusable Components Using HTML Skills

A template component is a reusable user interface element you create without coding.

Developers familiar with basic HTML, placeholder #NAME# substitution, and HTML directives can create sophisticated, reusable user interface controls. Other team members use template components just like native ones in Page Designer, configuring their settings in the Property Editor.

• Template Component Overview
  You can create a reusable UI component using templates with HTML tags, #NAME# placeholder substitutions, and template directives for conditional formatting.
• Custom Attributes for Data and Settings
  The custom attributes you define are named placeholders developers configure in the Property Editor to provide the data the component displays and any settings it requires.
• Slots Enable Component Composition
  It's easy to define a component that can compose other regions, page items, and buttons. Just define a named slot and include its contents in your template using the #SLOTNAME# syntax.
• Applying Template Using Directives
  Developers can use a template component with internal name TEMPLATE_NAME anywhere directives are allowed.
• Controlling Component Availability
  Using the {with/}…{apply/} directive, developers can always apply your template component by name, but you decide if they can use it in Page Designer by setting its Available as options.
• Templates Comprising the Component
  A template component always has a primary template called the Partial. This name evokes the role it plays as a part of the web page at runtime. Your Partial template includes the main markup that determines how the component's attributes appear on the page.
• Presenting Grouped Data
  When you make your template component available as a Multiple (Report) region, it can present the rows from its data source grouped by common values. Define the HTML markup that should appear for each distinct group using the Report Group template that includes the rows in the group using #APEX$ROWS#.
• Configuring Pagination Support
  For a template component available as a Multiple (Report) region, you configure whether users view additional results beyond the first screenful by scrolling or paging. This works both for normal and grouped results.
• Enabling Row Selection
  If you make your template component available as a Multiple (Report) region, enable row selection by checking Has Row Selection Support in the Standard Attributes section of the edit page.
• Attribute Scopes and Availability to Templates
  You assign a scope of Component, Report, or Report Group to each custom attribute.
• Action Positions and Action Templates
  If your template component presents a single row or multiple rows of data, it can also define action positions. These are row-specific slots where teammates using the component can define buttons or menus to perform actions on a specific row.
• Defining Files and File URLs to Load
  If your component uses Cascading Style Sheets (CSS) or JavaScript, store them in separate component files to improve maintainability.