Drag-Drop Business Central Order Line Locations: Power Apps

You can drag and drop Microsoft Dynamics 365 Business Central data using Power Apps. Scott Durow created a gallery like container that lets you change the order of items within a container as well as drag and drop items between containers. The feature is called Power Drag Drop which appears as a Code component in Power Apps as shown below.

Power Drag Drop

Let's create a simple example as to how we could use the Power Drag Drop control. You are with an organization that frequently changes line item locations after order entry. It would be nice to quickly drag and drop line items between locations. We would enter a sales order number, drag and drop line items between locations, and then save the results. The screen might look like this.

Power Drag Drop Sales Order Lines

To create a solution you first need to download and install Scott's solution on GitHub. You then need to create a canvas app. We will be using the Cronus company and the Business Central Standard APIs V2.0 connector for this example. We will be using the Business Central Sales Orders, Sales Order Lines, and the Location tables. You are ready to build your drag drop app.

1. The first step is to extend the Business Central locations table to include a DEFAULT location. Insert the following code in the App OnStart trigger where it will run on app startup:

ClearCollect(
    LocationsCollection,
    'locations (v2.0)'
);
Patch(
    LocationsCollection,
    Defaults(LocationsCollection),
    {Code: "DEFAULT"}
);

2. The next step is to create a ComboBox on your canvas to lookup a sales order. Use Sales Orders under the Standard APIs V2.0 as the source. I am not filtering sales orders by status. But, you may want to based upon your needs. Use the No. as the Primary text and Searchfield.

ComboBox Properties Setup

3. Enter the following code on the ComboBox OnChange trigger. This will create a MasterCollection that we will later bind to the Power Drag Drop control. The MasterCollection contains information from the associated Business Central sales order lines and location tables. We will also create the SalesLinesCollection which will be used when we save our changes.

ClearCollect(
    SalesLinesCollectionTemp,
    Filter(
        'salesOrderLines (v2.0)',
        'Document Id' = GUID(ComboBox1.Selected.Id)
    )
);
ClearCollect(
    SalesLinesCollection,
    Sort(
        SalesLinesCollectionTemp,
        Id
    )
);
ClearCollect(
    MasterCollection,
    ForAll(
        SalesLinesCollection,
        {
            lineId: Id,
            itemNo: 'Line Object No.',
            quantity: Quantity,
            locationCode: First(
                Filter(
                    LocationsCollection,
                    Id = 'Location Id'
                )
            ).Code
        }
    )
);
UpdateIf(
    MasterCollection,
    IsBlank(locationCode),
    {locationCode: "DEFAULT"}
)

4. The next step is to drag and drop the Power Drag Drop component on to the canvas four times.

5. On each of the four controls:

a. Set the Items property to MasterCollection

b. Set the Drop Zone Id property. Each control will have a different Drop Zone Id. Enter DEFAULT, WEST, HOME, and EAST starting from the control on the left side of the screen.

c. On the advanced tab set the IdColumn property to lineId

d. On the advanced tab set the ZoneColumn property to locationCode

e. Edit the Fields property and add the fields itemNo and quantity

f. Add a Label at the top of each control and enter the four names as show above

g. Change the Border Color property to Black

6. On the control with the DEFAULT Drop Zone Id we need to:

a. Rename the control to DragDropMaster

b. Enter WEST,MAIN,EAST in the Other Drop Zone Ids property

c. Set the Master Zone property to On

DragDropMaster Properties

7. At this point in the process you should be able to drag and drop between different locations after selecting an order. The changes you make will not take effect until we save them.

8. The next step in the process is to create a way to save the changes to Business Central that we made during our drag and drop session. Add a Button to the canvas and change the text property to Save. We sort the DragDropMasterCollection by the ItemId field. We want the SalesLinesCollection and DropMasterCollectionCollection to contain the same number of records and both be sorted by the sales line id field. We want the two collections to parallel each other.

In the last part of the code we Patch the Business Central sales order lines by iterating through the SalesLinesCollection. We use an Index to reference the DropMasterCollectionCollection and SalesLinesCollection records. We only update the Business Central sales order lines with a DropZoneId reference when the HasMovedZone field is true. Add the following code to the OnSelect trigger of the button:

ClearCollect(
    DragDropMasterCollection,
    Sort(
        DragDropMaster.CurrentItems,
        ItemId
    )
);
ForAll(
    Sequence(CountRows(SalesLinesCollection)),
    If(
        Index(
            DragDropMasterCollection,
            Value
        ).HasMovedZone = true,
        Patch(
            'salesOrderLines (v2.0)',
            Index(
                SalesLinesCollection,
                Value
            ),
            {
                'Location Id': First(
                    Filter(
                        LocationsCollection,
                        Code = Index(
                            DragDropMasterCollection,
                            Value
                        ).DropZoneId
                    )
                ).Id
            }
        )
    )
);

We are now done. Happy dragging and dropping.