External Screen

The ExternalScreen class can be used to open different popups from the application and to communicate between the popups using WebSocket events.

To open a new external screen you need to use the global akioma.launchExternalScreen method.

Example:

akioma.launchExternalScreen({
      autostartObjects: 'DocViewerFrame',
      baseLayoutObject: 'AkiomaMainLayout',
      screen: {
           width: 900,
           height: 700 
      }
});

The most basic attributes are the baseLayoutObject and autostartObjects, the name of the layout and the initial auto starting object in layout(desktop). 

The baseLayoutObject default is read from the sessionData.baseLayoutObject property if it hasn't been specified in the attributes.

Besides the baseLayoutObject and autostartObjects, there is an option to specify the initial size and position of the popup using the "screen" object parameter.

Note: When using the method to launchExternalScreen if the popup is already opened it will emit a "launchContainer" socket event, that means it will not open a new popup but try to use the existing one for launching.

Note: When trying to open the ExternalScreen if the popup is blocked, a notification message will appear informing the user that the popup could not be opened. Enabling popups from your browser will fix this issue.

Sending custom data in External Screen and options

If required to read custom data inside the external screen, the custom data can be specified in the launchExternalScreen options.

Example:

const ExternScreenOpts = {
	launchContainer: WindowName,
	baseLayoutObject: 'AkiomaDocviewerMainLayout',
	autostartObjects: 'mainDesktopDocViewerW',
	name: 'DocViewer',
	screenNamespace: WindowName,
	custom: {
		stamm_id: cStammId,
		id: oWin.opt.id
	},
	onBeforeScreenUnload: () => {
		// close the linked
		akioma.ExternalScreen.popups.forEach(popup => popup.close());
	},
	onBeforeScreenLoadClosed: () => {
		for (var i in akioma.oWindowsParentCell.childs) {

			var win = akioma.oWindowsParentCell.childs[i];

			if (win.opt.name === 'sStammDetailWindow') {
				var oRibbon = win.getDescendant('ribbon');
				oRibbon.enableItem('StammDossierExternalWindow');
				oRibbon.enableItem('StammDossierExternalDocumentWindow');
			}
		}

		akioma.VuexStore.dispatch('taskbar/clearAllExternalScreens'); // remove header color for all externalScreens opened from taskbar
	};
};

ExternScreenOpts.onBeforeScreenUnload = () => {
	// close the linked
	akioma.ExternalScreen.popups.forEach(popup => popup.close());
};
	
akioma.launchExternalScreen(ExternScreenOpts);

Above you can see an example of sending the custom data inside the "custom" property value of the params.

The user can also specify the "launchContainer" name. The screen that will be launched when the popup is already opened via websocket events.

It is also possible to specify the "onBeforeScreenUnload" callback, that will be called before the popup is unloaded or if the main opener window is unloaded.

The "onBeforeScreenLoadClosed" event callback is called before the screen actually loads and if it has been closed.

WebSocket Events on Docviewer:

Below we have the list of most recent Docviewer events that can be handled via callback by using the callback method setters from the ExternalScreen class.

launchContainer - event triggered from launchExternalScreen if already opened and launchContainer param is specified

refresh - event triggered to handle layout visibility in External Screen. (eg. clearing screens, expanding panels etc.)

activeWindow - event triggered on taskbar item selected or window in focus changed

closeExternalWindow - event triggered when a window is closed

refreshScheme - event for triggering refresh data in external screen

Prompting the HasChanges Dialog in ExternalScreens

External screens can also have changes that are bound to a secondary external screen.

In this use-case it is possible to programmatically prompt the user with the has changes dialog by adding an EventBeforeSelect on the corresponding Grid object.

In the EventBeforeSelect it is required to return a payload object with the setting "promptCursorChange" set to true. This will block the record selection and prompt the user with the Has Changes dialog.

The getExternalPopup method from the ExternalScreen class can be used to retrieve the ExternalScreen window object based on provided screenNamespace used when launching the External Screen Popup.

Example:

/**
* Method to execute before row selecting to display ExternalScreen hasChanges prompt 
* @param grid 
*/
export function onBeforeGridRowSelect(grid: akioma.swat.Grid) {
    const payload:any = {};
    const DocviewerExternalScreen = akioma.ExternalScreen.getExternalPopup('sDocViewerExternalWindow');
    const hasChangesExternal:boolean = DocviewerExternalScreen.akioma.swat.Root.getFirstChildByType('businessEntity').hasChanges();
        
    if(hasChangesExternal) {
        payload.promptCursorChange = true;
    }

    return payload;
}