Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK

CRecordWebShowModal

The CRecordWebShowModal message shows a modal dialog.

The message is part of the RemoteSkin Web API.
The API is located in the plugin NY_RemoteSkinWebProtocolAPI. 

{
  "id": "df92f998-f2ad-484c-aac5-5e714bc7996c",
  "name": "WEB_SHOW_MODAL",
  "description": "Show a modal dialog.",
  "slots": [
    {
      "key": "1",
      "name": "ID",
      "direction": "REQUEST",
      "mandatory": "true",
      "type": "STRING",
      "description": "The id of the dialog."
    }
  ]
}

Arguments

  • ID : The id of the dialog HTML element (usually a div).

Usage with the helper class CWebApi

The easiest way is to call the corresponding method in the CWebApi class. The use of the class is described there. 

mWebApi.showModal(@NotNull final String aId);

Usage as message

The RemoteSkin target address is also required. 

public void showModal(@NotNull final CTargetAddress aRemoteSkinAddress,
                      @NotNull final String aId) throws CException
{
    // Envelope
    final CEnvelope env = CEnvelope.forSingleTarget(mRemoteSkinAddress);
    
    // Record
    final CRecord record = CRecordWebShowModal.create();
    CRecordWebShowModal.setId(record,
                              aId);
    
    // send message
    sendNotification(env,
                     record);
}

Example for a modal dialog (using UIkit)

The following dialog is the "YesNo Dialog" used by the UserManager.

The tag {message} is replaced by the message to be displayed. The HTML code is then inserted into the web page using setInnerHtml and showModal() is called. 

<div id="id_00001_modal" uk-modal="bg-close: false; stack: true">
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default"
                type="button"
                uk-close></button>
        <div class="uk-margin">
            <div id="id_00001_message" class="uk-alert-primary" uk-alert>
                {message}
            </div>
        </div>
        <p class="uk-text-right">
            <button id="id_00001_no"
                    class="uk-button uk-button-default"
                    type="button">
                no
            </button>
            <button id="id_00001_yes"
                    class="uk-button uk-button-primary"
                    type="button">
                yes
            </button>
        </p>
    </div>
</div>

See also: