Drag and Drop (dnd)

Insight Explorer offers drag and drop functionality in different scenarios

• Tree node onto attribute field (Maximo and Details)
• (Tree internal) from node item 1 to node item 2
• Tree to table header, see the Gantt Table and Moving tasks chapters

Drag and Drop onto attribute field:

If you drop an node from a tree onto an attribute field the client tries to fill the target with the following logic:

• Tree node has an attribute with the same name as the target
• Tree node is from type object and has an attribute id, target attribute is named objectId
• Target attribute has a dnd.srcAttribute configuration, see example below
• If all fail the label will be put into the attribute input

Example: fill the parentId attribute with the value of the objectId property of the dropped node, instead of falling back to its label:

{
    "name": "parentId",
    "dnd": {
        "srcAttribute": "objectId"
    }
}

Drag and Drop onto tables, planning or inside trees:

The configuration has to be on the top level section of the target as follows:

MaximoOpenJet

{
    "dnd": [
        {
            "src": "Standort",
            "dst": "Standort",
            "action": {
                "action": "request",
                "request": {
                    "method": "GET",
                    "url": "../maximo/webclient/insight/rest/changeLocationParent.jsp",
                    "params": {
                        "location": "${src.LOCATION}",
                        "parent": "${dst.LOCATION}",
                        "system": "${dst.SYSTEMID}",
                        "site": "${dst.SITEID}",
                        "dummy": "${userData.personid}"
                    }
                }
            }
        }
    ]
}

{
    "dnd": [
        {
            "src": "Person",
            "dst": "Person",
            "action": {
                "method": "POST",
                "url": "insight/eam/rpc/insightTest/mitarbeiter",
                "params": {
                    "vorgesetzter": "${dstObject.uniqueId}",
                    "mitarbeiter": "${srcObject.uniqueId}"
                },
                "headers": {
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            }
        }
    ]
}

• src: name of drag node. The special value _external matches any dragged item for which no config entry has an exact src match on this target - useful as a fallback for drops coming from outside the current tree/config (e.g. a different tree, a Gantt or a search result). An exact src match always takes precedence over an _external entry.
• dst: name of drop node. If omitted, the configuration matches a drop directly onto the tree itself (e.g. an empty area of the tree view) instead of onto a specific node - this is used e.g. to create a new root object from a dragged item.
• action: defines a method call to handle the dnd action. Can either be:
  • a plain REST call shorthand as used in the "OpenJet" example above (method, url, params, headers)
  • any menu action configuration as used in the "Maximo" example above (there via the request action) - this allows using any of the available menu actions (e.g. js, confirm, ...), not just REST calls
  • url: Url to be called
  • params: URL-parameter URL, "Key": "Value"
    • Values can be retrieved via reference, e.g. ${src.LOCATION} is automatically filled with the value of the attribute LOCATION from the src (=dragged) object
    • Values can be fixed values, e.g. fixed value
    • Values can be retrieved via prefilled object, e.g. ${userData.personid}.
    • See also chapter working with variables/values
  • headers: URL-headers, "Key": "Value"

Available variables:

Variable	Description
src	Properties of the dragged (source) object, flattened, e.g. ${src.LOCATION}. Also provides ${src.$uniqueId} and ${src.$path}.
dst	Properties of the drop target (destination) object, flattened, analogous to src.
srcObject	The full source record, e.g. ${srcObject.uniqueId}, ${srcObject.label}, ${srcObject.path}.
dstObject	The full destination record, analogous to srcObject.

Gantt

When dragging a task within a Gantt chart, additional variables (gantt.startDate, gantt.endDate, gantt.referenceDate) are available. The Gantt configuration also supports the additional resize and allowRowSwitching properties on a dnd entry, see Moving tasks.

Restricting the visual drop indicator (dstCondition):

dstCondition can be added to a dnd config entry to only highlight a target as a valid drop zone while dragging over it if the target's properties match the given condition:

{
    "dnd": [
        {
            "src": "Standort",
            "dst": "Standort",
            "dstCondition": {
                "STATUS": "OPERATING",
                "TYPE": "*"
            },
            "action": {}
        }
    ]
}

• "PROPERTY": "value" requires the target's PROPERTY to equal value (variables like ${...} are resolved the same way as in action.params).
• "PROPERTY": "*" requires the target's PROPERTY to be set (not null/undefined), regardless of its actual value.

Note

dstCondition only controls whether the target is highlighted as a valid drop zone while dragging over it - it does not prevent the configured action from being executed if the item is dropped anyway.

Confirming duplicate favorites (checkBefore):

Setting "checkBefore": "favorite-exists" on a dnd config entry checks - before executing the action - whether a favorite of the dragged object already exists. If it does, the user is asked to confirm ("Favorite already exists, create again?") before the action proceeds; if no favorite exists yet, the action is executed right away.