Enable drag and drop for employee assignments
HTML Drawing Control
Enable drag and drop for employee assignments
Summary
In the Space Console, you can make employee assignments by graphically dragging and dropping an employee label from one valid location to another. This could be from one room to another, within the same floor plan, or across multiple floor plans. Alternately, you can drag and drop an employee into a virtual waiting area, such as an "asset panel" or "waiting room." Later on, you might move that employee out of the waiting area and onto a floor plan. Depending upon where the asset is dropped, different actions can be taken.
Goals
To support this feature, HTML drawing control:
- Creates and displays a single, shared asset popup panel. The asset panel is movable, scrollable, and collapsible. Rows can be edited or deleted.
- Enables drag and drop interaction within a single floor plan.
- Enables drag and drop interaction within multiple floor plans.
- Enables drag and drop interaction between the asset panel and one (or multiple) floorplans.
- Facilitates working with drawings that have different zoom levels.
- Allows the view developer to override default settings and control the cosmetics of the asset panel.
- Allows the view developer to wire up custom handlers.
To enable the asset panel add-on:
Enable asset panel
parameters['addOnsConfig'] = { ... 'AssetPanel': { divId: "drawingDiv", tableName: 'em', pkeys: 'em_id', title: "Waiting Room", datasourceId: "employeeDS", collapsible: true, size:{width:450, height:300}, font: {fontFamily:'Arial', fontSize:'11'}, selectionColor:'#FFEAC6', rowActions: [ {type:'em', title:"Edit", icon: Ab.view.View.contextPath + "/schema/ab-core/graphics/edit.gif", listener: this.editAsset.createDelegate(this)}, {type:'em', title:"Delete", icon: Ab.view.View.contextPath + "/schema/ab-core/graphics/delete.gif", listener: this.deleteAsset.createDelegate(this)}] onAssetLocationChange: this.assetDropEventHandler.createDelegate(this) } ... }; //Pass two parameters: row record object and datasource name with row action's callback function /** * Edits asset record when the asset panel row edit action is selected * * @param {Object} rowRecord * @param {String} dataSourceName */ editAsset: function(rowRecord, dataSourceName){ //work with row record }, /** * Deletes asset record when the asset panel row delete action is selected * * @param {Object} rowRecord * @param {String} dataSourceName */ deleteAsset: function (rowRecord, dataSourceName){ ////work with row record },
Example view : http://localhost:8080/archibus/schema/ab-products/solutions/programming/drawing/ab-ex-dwg-html-control-asset-panel.axvw