Modal dialog in Web Author

Post here questions and problems related to oXygen frameworks/document types.
NicoAMP
Posts: 26
Joined: Tue Mar 06, 2018 2:07 pm

Modal dialog in Web Author

Post by NicoAMP » Wed Sep 26, 2018 9:30 am

Hi,

I would like to launch dialog box on a button in Web Author.
On this dialog I would like to select one or more values in a select box. And after I would like to add these values in an attribute.

I try to make this dialog "modal" to wait before to continue handling.
It doesn't work : the dialog is displayed and at the same time the attribute is changed.

Do you know how to makes the dialog modal?
It is possible to get selected values in the dialog to use it?

My code:

Code: Select all

WebLinkAction.prototype.actionPerformed = function(callback) {
text = window.prompt("Please enter the link attribute");

this.dialog = workspace.createDialog();
this.dialog.setModal(true);
this.dialog.setPreferredSize(150,120);
this.dialog.setContentPreferredSize(150,120);
this.dialog.setTitle('Select audience');
this.dialog.setButtonConfiguration(sync.api.Dialog.ButtonConfiguration.OK_CANCEL);
this.dialog.getElement().innerHTML = '<select name="audience" multiple style="width:100px;height:100px;"><option value="internal">internal</option><option value="ADA">ADA</option></select>';
this.dialog.show();

this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', {
name: 'audience',
value: 'internal'
}, callback);

};
Thanks.

NicoAMP
Posts: 26
Joined: Tue Mar 06, 2018 2:07 pm

Re: Modal dialog in Web Author

Post by NicoAMP » Wed Sep 26, 2018 12:42 pm

I found how to wait dialog response to apply my handling.
But now how can I get selected items in my list inside the dialog?

Code: Select all

WebLinkAction = function(editor) {
this.editor = editor;
this.dialog = workspace.createDialog();
this.dialog.setModal(true);
this.dialog.setPreferredSize(150,120);
this.dialog.setContentPreferredSize(150,120);
this.dialog.setTitle('Select audience');
this.dialog.setButtonConfiguration(sync.api.Dialog.ButtonConfiguration.OK_CANCEL);
this.dialog.getElement().innerHTML = '<select name="audience" multiple style="width:100px;height:100px;"><option value="internal">internal</option><option value="ADA">ADA</option></select>';
};
WebLinkAction.prototype.actionPerformed = function(callback) {
this.dialog.show();
this.dialog.onSelect(function(e) {
// The event contains information on the selected button.
window.prompt('Event: ', e);
});
};
Thanks.

Gabriel Titerlea
Posts: 40
Joined: Thu Jun 09, 2016 2:01 pm

Re: Modal dialog in Web Author

Post by Gabriel Titerlea » Wed Sep 26, 2018 4:21 pm

Hello,

Here's an example of how to retrieve the selected option:

Code: Select all


WebLinkAction.prototype.actionPerformed = function(callback) {
this.dialog.show();
var dialogElement = this.dialog.getElement();

this.dialog.onSelect(function(key, e) {

if (key === 'ok') { // If the user pressed the 'ok' button from the dialog

var selectElement = dialogElement.querySelector('select[name=audience]');
var selectedValue = selectElement.options[selectElement.selectedIndex].value;

console.log(selectedValue); // use the selected value here however you want.
}

// Call the callback method to indicate that the action has completed it's execution.
callback();
});
};
Best,
Gabriel

NicoAMP
Posts: 26
Joined: Tue Mar 06, 2018 2:07 pm

Re: Modal dialog in Web Author

Post by NicoAMP » Wed Sep 26, 2018 4:40 pm

Thanks a lot Gabriel, it's exactly what I needed.

NicoAMP
Posts: 26
Joined: Tue Mar 06, 2018 2:07 pm

Re: Modal dialog in Web Author

Post by NicoAMP » Fri Sep 28, 2018 12:30 pm

I think I'm close to completion, but nothing append when I click on OK in my dialog.

Any ideas?

Code: Select all

WebLinkAction.prototype.actionPerformed = function(callback) {    
this.dialog.show();
var dialogElement = this.dialog.getElement();

this.dialog.onSelect(function(e) {
if (e === 'ok') {// If the user pressed the 'ok' button from the dialog
/*window.prompt('Event: ', e); */
var selectElement = dialogElement.querySelector('select[name=audience]');
var selectedValue = '';

for (var i = 0; i < selectElement.length; i++) {
if (selectElement.options[i].selected){
selectedValue = selectedValue + selectElement.options[i].value + ' ';
}
}

if (selectedValue !== ''){
if (this.editor.getSelectionManager().getSelection().isEmpty()){
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', {
name: 'audience',
value: selectedValue
}, callback);
} else {
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ToggleSurroundWithElementOperation', {
element: '<ph audience="'+selectedValue+'"/>'
}, callback);
}
}

}
});

// Call the callback method to indicate that the action has completed it's execution.
callback();
};

cristi_talau
Posts: 204
Joined: Thu Sep 04, 2014 4:22 pm

Re: Modal dialog in Web Author

Post by cristi_talau » Fri Sep 28, 2018 1:39 pm

Hello,

There is a typo in the code

Code: Select all


for (var i = 0; i < selectElement.length; i++) {
should be

Code: Select all


for (var i = 0; i < selectElement.options.length; i++) {
Best,
Cristi

Gabriel Titerlea
Posts: 40
Joined: Thu Jun 09, 2016 2:01 pm

Re: Modal dialog in Web Author

Post by Gabriel Titerlea » Fri Sep 28, 2018 1:56 pm

There are 2 more problems:

1. The function passed to the onSelect method should be bound to your WebLinkAction object because you are calling this.editor.getSelectionManager().

Example:

Code: Select all

this.dialog.onSelect(function () {
// function body here
}.bind(this)); // Notice the bind here. This will ensure that `this` will be the same here and inside the function.
2. You are calling the callback method to early. You should call it when the user presses cancel or when the ChangeAttributeOperation or ToggleSurroundWithElementOperation actions complete.

Example:

Code: Select all

if (e === 'ok') {
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', {
name: 'name',
value: 'value'
}, callback);
} else {
callback();
}
Best,
Gabriel

NicoAMP
Posts: 26
Joined: Tue Mar 06, 2018 2:07 pm

Re: Modal dialog in Web Author

Post by NicoAMP » Tue Oct 16, 2018 4:50 pm

Thanks, It works perfectly now :D

Post Reply