openPopup
The following types of popups are supported:
iframe popup
context.openPopup(params) - Opens a popup with an iframe inside.
| argument | Type | Description |
|---|---|---|
| paramsrequired | object | params for popup |
Return value - Promise
await settingsContext.openPopup({
type: 'iframe',
title: 'Timer settings',
url: './settings.html',
height: 200,
width: 300
});confirm popup
context.openPopup(params) - Opens a confirm popup.
| argument | Type | Description |
|---|---|---|
| paramsrequired | object | params for popup |
Return value - Promise
btnContext.openPopup({
type: 'confirm',
title: 'Confirm popup',
text: 'Are you sure? :)',
confirmLabel: 'Yes, do it',
confirmCallback: (popupContext) => {
console.log('confirm clicked!');
},
cancelLabel: 'Cancel',
cancelCallback: () => {
console.log('cancel clicked!');
}
});staticList popup
context.openPopup(params) - It opens a popup with a list type. It displays a list of options. Each option has text and a callback function that will be triggered when the option is clicked. There's also an option to display a text field for filtering options (in case the number of options is large).
| argument | Type | Description |
|---|---|---|
| paramsrequired | object | params for popup |
Return value - Promise
context.openPopup({
type: 'staticList',
title: 'Test static list',
items: [{
text: 'Open test iframe popup',
secondaryText: 'It simply demonstrates iframe popup in current popup',
callback: (btnContext) => {...}
}, {
text: 'Open submit popup',
secondaryText: 'Submit popup example',
callback: (btnContext) => {...}
}, {
text: 'Simple list with search',
secondaryText: 'Demonstrates simple list with search',
callback: (btnContext) => {...}
}, {
text: 'Open dynamic search popup',
secondaryText: 'Demonstrates dynamic search',
callback: (btnContext) => {...}
}]
})dynamicList popup
context.openPopup(params) - It opens a popup with a list type and a search field. Entering data into the field triggers a function, the result of which should be a list of available options based on the search phrase..
| argument | Type | Description |
|---|---|---|
| paramsrequired | object | params for popup |
Return value - Promise
btnContext.openPopup({
type: 'dynamicList',
title: 'Dynamic list',
loadingLabel: 'Searching options...',
items: async (context, options) => {
await new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 1000);
});
if (!options.data.searchValue.length) {
return [];
}
return generateArrayWithObjects(20, options.data.searchValue);
},
search: {
emptyLabel: 'Type something to get options',
enabled: true,
debounce: 400,
}
});Opening nested popups
