# Dialog: Mobile Native Dialog Control

The dialog module provides many interfaces for applications to access dialog. Open a floating layer in the middle of the current page to carry the corresponding information display and operation.

Developers can determine whether these interfaces work in the EdgerOS mobile App environment through the following code:

edger.env().then(data => {
  if (data.env === 'edgerapp') {
    // We work in EdgerOS mobile App environment.
  }
}).catch(error => {
  console.error(error)
})

# Functions

Every dialog application starts by creating a new dialog instance with the create function:

# edger.media.create(type, config)

Create a dialog.

const dialog = edger.dialog.create(
  // parameters
)

The parameters of the create method include:

• type {String} The type of dialog. Optional values: bottom_sheet | bottom_sheet_selections |normal1btn | normal2btn | normal3btn.
• config {Object} The configuration of each dialog.
• Returns: {Object} Dialog instance object.

When the type is bottom_sheet, the parameters of config are as follows:

• title {String} The title of the dialog.

• content {Array} Information about each item in the dialog. The configuration items included in each item are as follows:

  • icon {String} Item icon.
  • title {String} Item title.
  • content {String} Item content.

• clickOverlayToClose {Boolean} Click the overlay to close the dialog. Default: false. Optional.

When the type is bottom_sheet_btn, the parameters of config are as follows:

• title {String} The title of the dialog.
• content {Array} Information about each item in the dialog. The configuration items included in each item are as follows:
  • title {String} Item title.
  • code {String} Item code (option ID, not displayed).
  • label {String} Label name. Optional.
  • labelColor {String} Label color. Default: #0077fa. Optional.
  • labelBgColor {String} Label background color. Default: #eaf5ff. Optional.
  • checked {Boolean} Whether the list item content is selected. Default: false.
• option {Object} Dialog other configuration, the configuration items are as follows:
  • confirmText {String} Confirm button text.
  • cancelText {String} Cancel button text.
• multiple {Boolean} Whether to enable multi-select. Default: false. Optional.
• clickOverlayToClose {Boolean} Click the overlay to close the dialog. Default: false. Optional.

When the type is bottom_sheet_selections, the parameters of config are as follows:

• content {Array} Information about each item in the dialog. The configuration items included in each item are as follows:
  • code {String} Item code (option ID, not displayed).
  • label {String} Label name.
  • labelColor {String} Label color. Optional.
  • icon {String} Item icon. Optional.
• option {Object} Other configuration items of the dialog, the configuration items are as follows:
  • cancelText {String} Cancel button text.
• clickOverlayToClose {Boolean} Click the overlay to close the dialog. Default: false. Optional.

When the type is normal1btn, the parameters of config are as follows:

• title {String} The title of the dialog.
• content {String} The content of the dialog.
• option {Object} Other configuration items of the dialog, the configuration items are as follows:
  • confirmText {String} Confirm button text.
  • confirmTextColor {String} Confirm button text color. Optional.
  • confirmBgColor {String} Confirm button background color. Optional.
• clickOverlayToClose {Boolean} Click the overlay to close the dialog. Default: false. Optional.

When the type is normal2btn, the parameters of config are as follows:

• title {String} The title of the dialog.
• content {String} The content of the dialog.
• option {Object} Other configuration items of the dialog, the configuration items are as follows:
  • confirmText {String} Confirm button text.
  • cancelText {String} Cancel button text.
  • confirmTextColor {String} Confirm button text color. Optional.
  • confirmBgColor {String} Confirm button background color. Optional.
  • cancelTextColor {String} Cancel button text color. Optional.
  • cancelBgColor {String} Cancel button background color. Optional.
• clickOverlayToClose {Boolean} Click the overlay to close the dialog. Default: false. Optional.

When the type is normal3btn, the parameters of config are as follows:

• title {String} The title of the dialog.
• content {String} The content of the dialog.
• option {Object} Other configuration items of the dialog, the configuration items are as follows:
  • confirmText {String} Confirm button text.
  • middleText {String} Middle button text.
  • cancelText {String} Cancel button text.
  • confirmTextColor {String} Confirm button text color. Optional.
  • confirmBgColor {String} Confirm button background color. Optional.
  • middleTextColor {String} Middle button text color. Optional.
  • middleBgColor {String} Middle button background color. Optional.
  • cancelTextColor {String} Cancel button text color. Optional.
  • cancelBgColor {String} Cancel button background color. Optional.
• clickOverlayToClose {Boolean} Click the overlay to close the dialog. Default: false. Optional.

Now we can instantiate a dialog object. Take a dialog of type bottom_sheet as an example:

const config = {
  title: 'title',
  content: [
    { 
      icon: "function-video-stream",
      title: "video", 
      content: "This is a video."
    },
    { 
      icon: "image-fill",
      title: "picture", 
      content: `This is a picture.`
    }
  ],
  clickOverlayToClose: true
};
// Dialog instance object
const dialog = edger.dialog.create('bottom_sheet', config)

Once instantiated, we can call methods on the instance, the instance methods are as follows:

# dialog.present()

Present a dialog.

• Returns: {Promise} Fulfill upon success with an object.

The results returned by different types of dialog are as follows:

When the type is bottom_sheet, an object is returned, which includes:

• id {String} Dialog ID, the unique identifier of the dialog.

When the type is bottom_sheet_btn, an object is returned, which includes:

• id {String} Dialog ID, the unique identifier of the dialog.
• action {String} Click the return value of the dialog button (such as: 'cancel' | 'confirm').
• checked {Array} Whether the list item content is selected (when action is cancel, return an empty array).

When the type is normal1btn, normal2btn or normal3btn, an object is returned, which includes:

• id {String} Dialog ID, the unique identifier of the dialog.
• action {String} Click the return value of the dialog button (such as: 'cancel' | 'middle' | 'confirm').

# Example

dialog.present().then((payload) => {
  console.log("dialog present successful, id:", payload.id)
}).catch((error) => {
  console.error(error)
});

# async / await

async function dialogPresent() {
  try {
    const payload = await dialog.present();
    console.log("dialog present successful, id:", payload.id)
  } catch (error) {
    console.error(error)
  }
}

# dialog.update(updateConfig)

Update the configuration of the dialog.

• updateConfig {Object} The updated configuration for each dialog.
• Returns: {Promise} Fulfill upon success with an object.

When the type is normal1btn, the parameters of config are as follows:

• content {Array} Dialog contents, the task object has the following items:
  • index {Number} Item index.
  • icon {String} Item icon. Optional.
  • title {String} Item title. Optional.
  • content {String} Item content. Optional.

When the type is normal1btn, normal2btn or normal3btn, the parameters of config are as follows:

• content {String} The content of the dialog.

Get an object of result, the object includes:

• id {String} Dialog ID, the unique identifier of the dialog.

# Example

Take a dialog of type bottom_sheet as an example:

const updateConfig = {
  content: [
    { index: 0, icon: "function-video-stream", title: "video update", content: "This is a video!" },
    { index: 1, icon: "function-wallpaper", title: "picture update", content: "This is a picture!" }
  ]
};

dialog.update(updateConfig).then((payload) => {
  console.log("dialog updated successful, id:", payload.id)
}).catch((error) => {
  console.error(error)
});

# async / await

async function dialogUpdate() {
  try {
    const payload = await dialog.update(updateConfig)
    console.log("dialog updated successful, id:", payload.id)
  } catch (error) {
    console.error(error)
  }
}

# dialog.dismiss()

Dismiss the dialog.

• Returns: {Promise} Fulfill upon success with an object.

Get an object of result, the object includes:

• id {String} Dialog ID, the unique identifier of the dialog.

# Example

dialog.dismiss().then((payload) => {
  console.log("dialog dismiss successful, id", payload.id)
}).catch((error) => {
  console.error(error)
});

# async / await

async function dialogDismiss() {
  try {
    const payload = await dialog.dismiss();
    console.log("dialog dismiss successful, id", payload.id)
  } catch (error) {
    console.error(error)
  }
}

# Events

The unified event listener provided by Web-SDK:

const listener = (payload) => {
  // Event handling...
}

// add listener
dialog.addEventListener('some-event', listener)

// or 
// onAction() is an alias of addEventListener().
dialog.onAction('some-event', listener)

// remove listener
dialog.removeEventListener('some-event', listener)

// remove all listeners
dialog.removeAllListeners()

# close

This event will be generated when the dialog closed.

• Returns: {Object} A dialog object.

Get an object of result, the object includes:

• id {String} Dialog ID, the unique identifier of the dialog.

# Example

dialog.addEventListener('close', (payload) => {
  const { id } = payload
  console.log("dialog close result:", id)
})

# select

This event will be generated when the dialog content item selected.

• Returns: {Object} An object.

Get an object of result, the object includes:

• id {String} Dialog ID, the unique identifier of the dialog.
• code {String} The code of the selected item in the content of the dialog.

# Example

dialog.addEventListener('select', (payload) => {
  const { code } = payload
  console.log("dialog content item selected code:", code)
})