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.