Versions Compared

Old Version 7

changes.mady.by.user Simon Hunt

Saved on

compared with

New Version Current

changes.mady.by.user Simon Hunt

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated example to enhanced API

...

Here is the dialog in action in the Application View:

 

Name Summary
openDialogOpens (creates if necessary) the dialog.
closeDialogCloses the dialog.
createDivCreates an unattached <div> element.

 

Function Descriptions

openDialog

...

Example UsageArgumentsReturn Value
dialog.setTitle(title);title - the text to set as the titledialog API
dialog.addContent(content);content - a D3 selection to be appended to the content section of the dialogdialog API

dialog.addButton(cb, text, key, chained);

cb - the callback function to be invoked when the button is pressed 

text - the text to display on the button

key - the logical name of the keyboard key bound to the button

chained - boolean true prevents dialog from being hidden when the button is pressed

dialog API
dialog.addOk(cb, text);

cb - the callback function to be invoked when the button is pressed

text - the text to display on the button [defaults to "OK"]

dialog API
dialog.addOkChained(cb, text);

cb - the callback function to be invoked when the button is pressed

text - the text to display on the button [defaults to "OK"]

dialog API
dialog.addCancel(cb, text);

cb - the callback function to be invoked when the button is

pressed dialog API

pressed

text - the text to display on the button [defaults to "Cancel"]

dialog API
dialog.bindKeys();(none)(none)

Notes:

  • addOk() is shorthand for invoking addButton() bound to the enter key, with chained == false
  • addOkChained() is shorthand for invoking addButton() bound to the enter key, with chained == true
  • addCancel() is shorthand for invoking addButton bound to the escape key, with chained == false
  • specifying chained == true prevents the dialog from being dismissed; this allows the dialog to be reconfigured with a follow-on question
  • bindKeys() is required to be called as the last function, to bind the keys to the key service.

 

 

The following dialog box might have code structured as listed below:

...

Code Block
languagejs
linenumberstrue
// ds is a reference to the DialogService.
 
var dialogId = 'app-dialog',
    dialogOpts = {
        edge: 'right'
    };
 
function createConfirmationText(action, itemId) {
    var content = ds.createDiv();
    content.append('p').text(action + ' ' + itemId);
    return content;
}

function confirmAction(action) {
    var itemId = $scope.selId,
    spar = $scope.sortParams;

    function dOk() {
        $log.debug('Initiating', action, 'of', itemId);
        wss.sendEvent(appMgmtReq, {
            action: action,
            name: itemId,
            sortCol: spar.sortCol,
            sortDir: spar.sortDir
        });
    }

    function dCancel() {
        $log.debug('Canceling', action, 'of', itemId);
    }

    ds.openDialog(dialogId, dialogOpts)
        .setTitle('Confirm Action')
        .addContent(createConfirmationText(action, itemId))
        .addButtonaddOk('OK', dOk)
        .addButton('Cancel', dCanceladdCancel(dCancel)
        .bindKeys();
}
 
// e.g. confirmAction('activate');
//      $scope.selId contains the ID of the selected item

 

 

 

 


Notice how buttons added to the dialog appear right to left.

Also note, since addButton() takes just a function reference as its first argument, any data required for the function should be defined in the closure.