Skip to main content

com.sabre.redapp.example3.web.nudge Sample

As a Red App developer, you are able to display Nudge through typescript Nudge API. The sample code snippets below demonstrate an example of how to add Nudge to Air Availability where destination is DFW airport.

  1. In the initialization method of the Main.ts:

    init(): void {
            super.init();
    
            //We define a custom icon that we want to use in our Nudge, it has to be in BASE64 format
            const CUSTOM_ICON_IN_BASE64: string = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABJ0lEQVRYR83XsQ3CMBAFUG'
                + 'caRkqBWIGWJgUFDS0rIApGYht00lmyHPvu37cCoSEI7P+I7Ys9pT+/psH8Rdvf2H5GABJ+'
                + '1WB5pxAsIIcfFfBSTBjBAMrwtwLmlBKFiAJa4Xn4KUQEYIXTCBSAhFMIBGCFnzX1US1DeD'
                + 'g8gPfPnxp8atQBCGEBvHDJtADyvYvoAZBwBOAiWgA0HAWYiBoQCY8AuogSEA2PApqIDGDC'
                + 'GcAKsRuAyJi74C3DujysluWuJmHWRu7EXRtdnB1RtyCNFiJkJ2ZWw9FSfFDBpyOhSzE6HJ'
                + 's+jBDE5o9jBOEuNWuiePuBsi2yOtwxrzERgFeswuHSYRTQQ1DhLKBGyGfqTDACKBFy/fOj'
                + 'Wbk65Dp8JMsdMHMAKb/wb756N3sh+j5jAgAAAABJRU5ErkJggg==';
    
            xp.addConfig('nudge', new NudgeConfig(
                //We set our custom icon as the one to be used in our Nudge.
                //But it could be one of the default ones: 'INFO', 'WARNING' or 'DANGER'`
                CUSTOM_ICON_IN_BASE64,
                //We add a text that will be displayed in our Nudge
                'Redapp Nudge with action for AirAvailability',
                //We add an array with buttons that will be present in our Nudge.
                //There can be multiple buttons or none.
                [{
                    //Id of the button.
                    id: 'RedappActionId',
                    //Label that will be displayed on the button.
                    label: 'Click me!',
                    //A function that will be called once the button is pressed.
                    action: (entries: NgvNudgeEntry[]) => {
                        console.log('Entries for this nudge:');
                        console.log(entries);
                        getService(LayerService).showInModal(new NudgeEntryView({
                            model: {entries: {entries}}
                        }), {title: 'Nudge entries'}, {display: 'areaView'});
                    }
                }],
                //We pass a function that is used to determine when to display Nudge.
                this.filterForNudge)
            );
        }
  2. Filter for Nudge

        //We create a function that based to Nudge Entries information will determine when to display Nudge.
        //Return value 'true' means that Nudge should be displayed.
        filterForNudge(entries: NgvNudgeEntry[]): boolean {
            //If the location is 'AIR_AVAILABILITY' or 'SHOPPING' and destination is location is 'DFW' then Nudge should be displayed.
            return entries.filter((entry, index, array) =>
                (entry.location == 'AIR_AVAILABILITY' || entry.location == 'SHOPPING')
                && entry.destination == 'DFW').length > 0;
        }
  3. NgvNudgeEntry data model

    //NgvNudgeEntry is defined as follows:
    export interface NgvNudgeEntry {
        //Carries information about which view that supports Nudge is displayed, possible options are 'AIR_AVAILABILITY', 'SHOPPING', 'HOTEL', 'CAR', 'SELL', 'PRICING'.
        location: string;
        //Departure location.
        origin?: string;
        //Destination location.
        destination: string;
        //Start date of the trip.
        start: string;
        //End date of the trip.
        end: string;
    }