Page Title¶
The Page Title component can display a title and sub-title for a page. You can also add various types of buttons that make use of the Action Framework.
Note
While it’s possible to create buttons using the Page Title component, Skuid recommends using the Button Set component.
Using the Page Title Component¶
Note
The content below assumes you have a Skuid page and at least one working model.
In addition to providing a header for the Skuid page, a Page Title component can provide context for the different sections of page, much like headers on a website. For example, if you have multiple Table components on a page, preceed each one with a Page Title that “names” the Table to follow.
To use the Page Title component, add a one to the page. Next, set properties:
- Set text for the Title and Sub-Title properties by adding a specific string of text, using the field picker to select and add merge variables for specific fields, or a combination of the two. By default, Title is set to
{{Name}}
and Sub-Title is set to{{Model.label}}
. You may also leave either of these properties blank.
Note
To ensure that you can select the field you want for Titles and Sub-Titles, include those fields in the model.
- Add buttons to trigger actions on the model.
Warning
Using a custom Salesforce button on a Skuid page with the Salesforce Support Service Cloud console may result in unexpected functionality.
Properties¶
Page Title Properties¶
Basic tab [[]]¶
- Model: The model the Page Title is connected to, providing fields and context to any merge variables used in the Title and Sub-title properties.
- Title: The “title” of the component, which appears as a top-level header. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two.
- Sub-Title: The “sub-title” of the component, appearing as a second-level header above the title. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two.
Advanced tab [[]]¶
- Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
- CSS Class (optional): Assign a CSS class to the component’s DOM element.
Display Logic tab [[]]¶
Conditional rendering allows you to display or hide the Page Title component, based on defined data conditions.
Button Properties¶
When you add buttons to the Page Title, these buttons have their own properties. Most properties available on Page Title buttons are the same as those for Button Set buttons, with the following exceptions:
Basic tab [[]]¶
- Button Type: Choose the type of action that the button will initialize:
- Save/Cancel: This option adds two buttons as a pair: a Save button and a Cancel button that affect the Page Title’s model.
- Additional Models to Save/Cancel: Models that will be saved or cancelled in addition to the Page Title’s model. Useful for having one save button per page.
- Save/Cancel: This option adds two buttons as a pair: a Save button and a Cancel button that affect the Page Title’s model.
Advanced tab [[]]¶
- Redirect URL, After Save Redirect URL, and After Cancel Redirect URL: These are shortcuts to the Go to URL action and its related properties. When using a Save/Cancel button type, the After Save Redirect URL and After Cancel Redirect URL will take effect after a save or cancel completes, respectively.
- (Optional) Save Button Label: Change the label on the Save button. Type label text or use the picker to select a field to use as the label.
- (Optional) Cancel Button Label: Change the label on the Cancel button. Type label text or use the picker to select a field to use as the label.
- Save Icon: Click the icon selector to choose the icon that displays on the Save button.
- Cancel Icon: Click the icon selector to choose the icon that displays on the Cancel button.
Save Hotkeys and Cancel Hotkeys tabs [[]]¶
Like the Hotkeys tab in the Button Set, these tabs allows you to establish a set of hotkeys that will immediately execute the actions associated with either the Save or Cancel buttons.