Breadcrumb
- Sabre Red 360 Software Development Kit Help
- Web Red Apps
- UI Contributions
- Tile Widgets
- Tile Widgets Overview
Tile Widgets Overview
Red Apps can contribute to different drawers with tile widgets components across Sabre Red 360.

General Idea
A tile widget is a small graphical element that can be added to the detailed result of a search (so-called drawer). It consists of two elements: graphical content that can be static or build based on a model passed it to the widget and, optionally, an action that will be performed when the user clicks on the tile.
Data
Model passed to tile depends on the search and way of implementation (Backbone or React where applicable).
In Backbone model passed to every tile of the drawer can be used via selfDrawerContextModelPropagated
function. In React tiles implementation, widget gets extended model as a prop or parameter to action.
Graphical Content
To set content of backbone tile the this.setDataContent
method has to be called with argument of HTML that is going to be displayed. For example this.setDataContent(\
<span><ol>I AM A TILE</ol></span>`)`
In case of React tiles the function that returns React.Element to be shown is expected as an argument for builder.
export const tileComponent = (data: PublicCslData) : React.ReactElement => <div className={'sdk-csl-custom-tile-content'}>
Prop Id : {data.propertyId}
</div>;
On Click Action
Backbone tiles can open up modal with custom view when clicked. Proper view can be set when creating a config for a tile.
React tiles can perform any defined action when clicked, including opening a modal. Action is defined when creating a tile using proper service.
Available Tiles
At the moment, Red Apps can contribute to:
APIs
Detailed APIs of configs and data models used to configure and work with tile widgets can be found in TypeScript API Documentation.
Example
You can see examples of tile widgets contributions in com.sabre.redapp.example3.web.tilewidgets sample.