...

Both the id and opts arguments are passed through to the createPanel() function of the PanelService.

The opts object is angular.extended with the default options, shown below:

var defaultSettings = {
        width: 300,
        edge: 'left'
    };

If a cssCls property is defined on the options object, it's value is used as a CSS class that is applied to the dialog element.

closeDialog

Closes the dialog panel. This function is idempotent.

...

Creates a detached <div> element, returning a D3 selection. Optionally, a CSS class may be specified to be applied to the element. 

content = ds.createDiv('my-class');
content.append('p').text('Some text');

This is a convenience function to help in the construction of content for the dialog. See below for a more complete example.

Dialog API

The API returned from openDialog() provides methods to set the title, add content, and add buttons.

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

Image Added

// ds is a reference to the DialogService.
 
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: sid,
            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))
        .addButton('OK', dOk)
        .addButton('Cancel', dCancel);
}

...