cabrillo.modal - Client

  • Release version: Xanadu
  • Updated August 1, 2024
  • 1 minute to read
  • Cabrillo JS functions for presenting web content inside of native modals.

    cabrillo.modal - dismissModal(Object data)

    Use to dismiss a modal that has been presented with the presentModal() function.

    A presented modal is responsible for dismissing itself and passing any results back to the presenting context. The dismissModal() function must be called from the presented context not from the presenting context.

    Table 1. Parameters
    Name Type Description
    data Object Optional. An object to pass back to the presenting context when the presented context dismisses itself.
    Table 2. Returns
    Type Description
    promise If successful, an unresolved object, otherwise an error.
    // Any object can be passed back to the presenting context when the presented context dismisses itself.
    var results = {
        team: 'Mobile'
        company: 'ServiceNow'
    }
    
    cabrillo.modal.dismissModal(results).then(function() {
        console.log('Modal was dismissed and results were passed to presenting context.');
    }, function(error) {
        console.log(error);
    });

    cabrillo.modal - presentModal( String title, String url, String closeButtonStyle, String modalPresentationStyle)

    Presents content in a native modal interface.

    Table 3. Parameters
    Name Type Description
    title String Title of the modal interface.
    url String The URL to open the modal. This must be an internal instance URL (fully qualified or relative; a relative URL is preferred).
    closeButtonStyle String Close button style of the modal interface.
    Possible values:
    • cabrillo.modal.CLOSE_BUTTON_STYLE_CANCEL
    • cabrillo.modal.CLOSE_BUTTON_STYLE_CLOSE
    • cabrillo.modal.CLOSE_BUTTON_STYLE_DONE
    For more information, see Cabrillo JS constants - close button styles.
    modalPresentationStyle String Presentation style of the modal interface.
    Possible values:
    • cabrillo.modal.MODAL_PRESENTATION_STYLE_FULL_SCREEN
    • cabrillo.modal.MODAL_PRESENTATION_STYLE_FORM_SHEET
    For more information, see Cabrillo JS constants - modal presentation styles.
    Note:
    This parameter is only supported on Apple iOS.
    Table 4. Returns
    Type Description
    promise If successful, a Cabrillo.ModalResponse object, otherwise an error.

    Present a native modal that loads a custom URL. This presents a custom Service Portal page in a form sheet style modal. The promise is fulfilled when the modal is dismissed. See the dismissModal() function for custom dismissal capabilities.

    cabrillo.modal.presentModal('Portal Page',
        '/$sp.do?id=my_modal_page',
        cabrillo.modal.CLOSE_BUTTON_STYLE_CLOSE,
        cabrillo.modal.MODAL_PRESENTATION_STYLE_FORM_SHEET
    ).then(function(response) {
        // The results from the modal are in a results key on the response object.
        var results = response && response.results ? response.results : null;
    
        if (results) {
            console.log('Modal dismissed with results.', results);
        } else {
            console.log('Modal dismissed without results.');
        }
    }, function(error) {
        console.log(error);
    });