Drag and drop object and properties panel angular

Developers Modeler
1

Hello Folks,
I want to say thank you in advance.
In my demo of bpmn there is right menu for custom bot task while i select that task and drag and drop in bpmn editor so whatever properties and field name i assigned in that task it should be autofil in properties panel
so anybody guide me how can i acheive this things in angular.
Right now i am able to drag and drop task but in that one extra click need while dropping bot task and another one auto fill properties panel like what ever value and input outpur parametere should be autofill so these are my issue
below are list of bot list that we used in drag drop

and below is my code

dragStartHandler(dragEvent: DragEvent, botName) {

    console.log("Drag Event", dragEvent,'botName',botName)

    dragEvent.dataTransfer.setData("activity", `activity-${Date.now()}`);

    // Hardcoded until we decide if backend will provide the full JSON or only the data to construct it from

    const definition1 = { "type": "bpmn:ServiceTask", "name": botName };

    const definition = JSON.stringify(definition1);

    const preview = document.createElement("div");

    dragEvent.dataTransfer.setData("activityDefinition", definition);

    preview.innerText = JSON.parse(definition).name;

    preview.setAttribute(

        "style",

        `position: absolute; height: auto; word-wrap: break-word; top: -500px; background-color: #EEE;

      border: 1px solid #111; border-radius: 8px; padding: 4px;`

    );

    document.body.appendChild(preview);

    dragEvent.dataTransfer.setDragImage(preview, 0, 0);

    // const bpmnDefinition = JSON.parse(definition)

    // const elementFactory = this.modeler.get("elementFactory");

    // const shape = elementFactory.createShape(bpmnDefinition);

    // const create = this.modeler.get("create");

    // create.start(dragEvent, shape);

    // this.selectBotName.emit(bpmnDefinition.name)

}

dragEnd(event: DragEvent, bot, botType) {

    console.log("Inside drag end",bot,botType)

    event.preventDefault();

    // this.addingBots(bot,botType)

    this.selectBotName.emit()

}

component .htl

<div class="col-9" style="max-width: 70% !important;" 
                        [title]="bot.botWithVersion.split('_')[0]" draggable="true"

                        data-bpmn-definition='{"type": "bpmn:ServiceTask", "name": "mytask"}'

                        (dragstart)="dragStartHandler($event,bot.botName.split('_')[0])" (dragend)="dragEnd($event,bot,bot.botType)">

                        <div class="float-left mr-2" [ngSwitch]="bot.botTechnology">

                            <img *ngSwitchCase="'Java'" class="img-fluid1" src="assets/images/java-logo.png"

                                alt="java_Logo">

                            <img *ngSwitchCase="'AutomationAnywhereRPA'" class="img-fluid"

                                src="assets/images/automation-anywhere.png" alt="Automation_Anywhere_Logo">

                            <img *ngSwitchCase="'UiPathRPA'" class="img-fluid" src="assets/images/uipath_bot.png"

                                alt="UIPATH_Logo">

                            <img *ngSwitchCase="'Python'" class="img-fluid" src="assets/images/python_bot.png"

                                alt="Python_Logo">

                            <img *ngSwitchCase="'BluePrismRPA'" class="img-fluid" src="assets/images/blue-prism.png"

                                alt="Blue-prism_Logo">

                            <img *ngSwitchCase="'AssistEdgeRPA'" class="img-fluid"

                                src="assets/images/assistedge.png" alt="AssistEdge_Logo">

                            <img *ngSwitchCase="'PowerShell'" class="img-fluid" src="assets/images/powershell.png"

                                alt="AssistEdge_Logo">

                            <img *ngSwitchCase="'Shell'" class="img-fluid" src="assets/images/shell.png"

                                alt="Shell_Logo">

                            <img *ngSwitchCase="'Ansible'" class="img-fluid" src="assets/images/ansible.png"

                                alt="Ansible_Logo">

                            <img *ngSwitchCase="'ML-AI'" class="img-fluid" src="assets/images/ml-ai.png"

                                alt="ML-AI_Logo">

                            <img *ngSwitchCase="'DotNetCore'" class="img-fluid" src="assets/images/dotNet.png"

                                alt="DotNet_Logo">

                            <img *ngSwitchCase="'DotNetFramework'" style="width: 22px !important;" class="img-fluid"

                                src="assets/images/DotNet_Framework.png" alt="DotNetFramework_Logo">

                            <img *ngSwitchDefault class="img-fluid" src="assets/images/what_bot.png"

                                alt="technology_Logo">

                        </div>

                        <p class="btf-p-a " *ngIf="bot.botType==='MICRO_BOT'"> {{bot.botWithVersion}}

                            <br />

                            <small class='btf-small' style="display: none;">{{bot.botType}}</small>

                            <!-- <small *ngIf="bot.botStatus!=='Completed' && bot.botStatus!==null" class="btf-small text-danger">[In-Progress]</small> -->

                        </p>

                        <p class="btf-p-a " *ngIf="bot.botType==='WORKER_BOT'"> {{bot.botName.split("_WB")[0]}}

                            <br />

                            <small class='btf-small' style="display: none;">{{bot.botType}}</small>

                            <!-- <small *ngIf="bot.botStatus!=='Completed' && bot.botStatus!==null" class="btf-small text-danger">[In-Progress]</small> -->

                        </p>

                    </div>

image

2

this custom bot list drop down menu
{
“id”: 169,
“botName”: “PrintWord_Java_V1_0_0”,
“botWithVersion”: “PrintWord_V1.0.0”,
“botDesc”: “Java bot to print the input word”,
“javaClass”: “com.infosys.impact.botfactory.microbots.file.PrintWord”,
“botType”: “MICRO_BOT”,
“botCategory”: “STRING”,
“botTechnology”: “Java”,
“assetName”: “PrintWord_Java_V1_0_0”,
“callable”: false,
“embedable”: true,
“keywords”: “java, Print, word”,
“botSpecVersion”: “1.0”,
“botVersion”: “1.0.0”,
“author”: “IMPACT DeveloperBOT Team”,
“importProcedure”: null,
“botStatus”: “Completed”,
“plannedStartDate”: null,
“plannedEndDate”: null,
“active”: true,
“botSpecificationId”: null,
“tasks”: []
},
{
“id”: 178,
“botName”: “BeforeString_Java_V1_0_0”,
“botWithVersion”: “BeforeString_V1.0.0”,
“botDesc”: “Java bot add new string before existing StringPattern”,
“javaClass”: “com.infosys.impact.botfactory.microbots.string.BeforeString”,
“botType”: “MICRO_BOT”,
“botCategory”: “STRING”,
“botTechnology”: “Java”,
“assetName”: “BeforeString_Java_V1_0_0”,
“callable”: false,
“embedable”: true,
“keywords”: “java, BeforeString”,
“botSpecVersion”: “1.0”,
“botVersion”: “1.0.0”,
“author”: “IMPACT DeveloperBOT Team”,
“importProcedure”: null,
“botStatus”: “Completed”,
“plannedStartDate”: null,
“plannedEndDate”: null,
“active”: true,
“botSpecificationId”: null,
“tasks”: []
},
{
“id”: 274,
“botName”: “ConvertTextToArray_Python_V1_0_0”,
“botWithVersion”: “ConvertTextToArray_V1.0.0”,
“botDesc”: “Pyhton Bot will convert the text data to array”,
“javaClass”: “com.infosys.impact.botfactory.microbot.CallPythonBots”,
“botType”: “MICRO_BOT”,
“botCategory”: “STRING”,
“botTechnology”: “Python”,
“assetName”: “ConvertTextToArray_Python_V1_0_0”,
“callable”: false,
“embedable”: true,
“keywords”: “python, ConvertTextToArray”,
“botSpecVersion”: “1.0”,
“botVersion”: “1.0.0”,
“author”: “IMPACT DeveloperBOT Team”,
“importProcedure”: null,
“botStatus”: “Completed”,
“plannedStartDate”: null,
“plannedEndDate”: null,
“active”: true,
“botSpecificationId”: null,
“tasks”: []
}
]

3

Please bpmn team help us

4

Help is here:

How to Style Code with Markdown

Inline Blocks

`var example = true`

Blocks

```
if (isAwesome){
  return true
}
```

Blocks with Syntax Highlighting

```javascript
if (isAwesome){
  return true
}
```