Drag and Drop Plugin

This is a jQuery plugin fully integrated with the agile platform to help you drag and drop elements to a drop area.

This plugin provides:

• DragElement and DropArea WebBlock;

• Uses TouchPunch plugin to work on tablets devices;

• No need to know JavaScript/jQuery;

• The DropArea WebBlock sends a notify message with the Identifier of the dragged element; 

Installing the component

Because the Drag and Drop component has no dependencies the installation is rather simple. You can download the component and install it through Service Center or you can install it directly into Service Studio.

After that in Service Studio click on Install or Update (if there is already a version available)

When the component is installed an application icon is shown in Service Studio.

Content op the Drag and Drop application

When you click on the Drag and Drop application icon the application opens and show two modules.

The module DragAndDrop contains all the webblocks, actions etc it needs to work and the module DragAndDropSample contains a working example of the Drag and Drop functionality.

You can open the DragAndDropSample module and click on the open in browser button which will open the sample page in your browser. 

In the tutorial below you will make your own new module which will use the Drag and Drop component.

Using the component

In order to have sample data, the OutSystemsSampleDataDB was needed to use a sample table. In this case, the Sample_Product was used.

Let’s say, you have an online shopping WebSite and you want to build an interactive shopping cart. You can do it by using the Drag and Drop plugin. While using this plugin, the user only has to drag a product and drop it on the drop area making his online shopping really easy. Now let’s talk about the “hard” part, how to implement it. You can do this by following the next steps:

1. Open Service Studio and install the Drag and Drop Plugin. After the installation is complete, create a new Web Application. After you finish creating your app, go to Manage Dependencies and import the DragAndDrop and OutSystemsSampleDataDB plugins. Note: You only need to select the Sample_Product entity in the OutSystemsSampleDataDB.

2. Besides the sample table that we are going to use, we also need another database table. So, go to the Data Tab and add an entity. You can do this by right-clicking Database and select Add Entity. Name this entity ShoppingCart and add two attributes: ProductId of type Sample_ProductId and Quantity of type Integer.

3. Go to the Interface Tab and a screen, you can do this by right-clicking in MainFlow and click Add Web Screen, name it SamplePage.

4. Above the Common\Layout WebBlock, put the scripts provided by the DragAndDrop plugin.

5. Now, add a local variable to the screen. Name it, DragOptions and set the type to DragElemOptions Record. 

6. Add a Preparation to the SamplePage Screen. In the Preparation, between the Start and End statement, drag an Aggregate and select the Sample_Product Table. Below, drag an Assign and add the following assignment

DragOptions.DragElemOptions.Revert = True

Preparation should look like this.

7. Because we will need two lists of products, create a Web Block to show the information about the product. You can do this by right clicking on MainFlow and click on Add Web Block. Name this Web Block ProductItem and add an input parameter with the name ProductId and the type Sample_Product Identifier. Also, add another input parameter of the type Boolean and name ShowDeleteIcon.

8. Add a Preparation to this screen. Drag an Aggregate between the Start and End statement and select the Sample_Product and ShoppingCart tables. In the Aggregate go to the Filter Tab and add this filter

Sample_Product.Id = ProductId

Because you only need to obtain information from one product, set the MaxRecords to 1

9. Now that we have the source of the information that we need, let’s go the UI part.

   1. Open the Web Block, and drag a Container. Inside the container, drag a CardSectioned. In the Image placeholder drag a container and set the Width and Height to 100px, inside this container add an image and set to the image in the Sample_Product.

In the Title placeholder, drag a container and set the Width to 10col. Inside this container, add an expression and set the value to GetProductById.List.Current.Sample_Product.Name. 

To the right of the Title container, drag another container. Inside, add an Icon and select the Trash one. Right-click this Icon and click on Enclose in If. Set the condition of this if to the ShowDeleteIcon input parameter. We are enclosing this icon on an If because we only want to show the icon when this WebBlock is used inside the ShoppingCartList. 

In the Content Placeholder, drag a container. Inside add an If statement and set the condition to not ShowDeleteIcon. In the True branch of the If, add an expression and set the value to GetProductById.List.Current.Sample_Product.Price + "€".

In the False branch, add another expression and set the value to GetProductById.List.Current.ShoppingCart.Quantity + " x " + GetProductById.List.Current.Sample_Product.Price + "€"

Now that the UI part is done, let’s go back to the Logic part. Right click the Icon and click on Link to “New Screen Action”. Name the recently created action RemoveProduct. Here is where we are going to do the logic to remove a product from the shopping cart. 

1. 1. 1. Open the RemoveProduct action and drag an Aggregate, select the ShoppingCart and add the following filter ShoppingCart.ProductId = ProductId. Also, set the MaxRecords to 1!

      2. Below, drag a Server Action and select the DeleteShoppingCart.

      3. Because we are going to need to notify the “Parent” create an Event. You can do this by right-clicking the WebBlock and select Add Event. Name this event NotifyRemoveProduct and set IsMandatory to No.

      4. Drag the recently created event below the DeleteShoppingCart.

      5. Lastly, below drag a Server Action and select FeedBackMessage. Set the MessageText to "Product was successfully removed from the shopping cart." and the MessageType to Success.

2. Now that we build the ProductItem Web Block, let’s create the ShoppingCart Web Block

   1. Create a Web Block and name it ShoppingCart.

   2. Add a Preparation to this Web Block, drag an Aggregate and select the ShoppingCart Entity.

   3. Drag a Container to the Web Block and inside add a text and write Shopping Cart. Also, give this text, a Heading2 Style.

   4. Below this Container, add another container and inside put the DropArea Web Block of the DragAndDrop plugin.

   5. In the DroppableArea Placeholder, add a ListRecords and set the SourceList to the GetShoppingCarts List. Inside the ListRecords, drag de ProductItem WebBlock. Set the ProductId Input Parameter to ShoppingCartList.List.Current.ShoppingCart.ProductId and the ShowDeleteIcon Input Parameter to True.

   6. Add two actions: one to handle the Notify from the DropArea (name it OnNotifyAdd) and the other to handle the NotifyRemoveProduct Event (name it OnNotifyRemove). 

   7. Let’s do the OnNotifyAdd action:

      1. First, add a local variable. Name it ProductId and set the type to Sample_Product.

      2. Drag a Server Action and select the NotifyGetMessage (It’s deprecated but because the component was build in the last version it’s necessary to use this action) Note: If you don’t have this action imported go to Manage Dependencies, and import this action. 

      3. Below this action, drag the GetIds action of the DragAndDrop plugin. Set the NotifyText to Deprecated_NotifyGetMessage.Message. 

      4. Under this action drag an Assign and the following assignment

5. 5. 5. Next, drag an Aggregate and select the ShoppingCart entity and the following filter ShoppingCart.ProductId = ProductId.

      6. Now, we need to verify if the product is in the shopping cart list or not. So drag an If statement and set the condition to not GetShoppingCardById.List.Empty.

         1. On the left of the If, drag an Assign to increase the quantity of the product in the shopping cart list.

2. 2. 2. 2. Connect the True branch of the If to this Assign.

         3. On the left of the recently created Assign, drag a Server Action and select the UpdateShoppingCart. Set the Source to GetShoppingCardById.List.Current.

         4. After you update, you need to notify the “Parent”, so create an Event (name it Notify) and put in left to the UpdateShoppingCart action. You need this event to notify the “Parent” where you are using the WebBlock.

         5. Next, add a Server Action and select the Feedback Message. Set the MessageText to "This product was already in your shopping cart, so the quantity was increased" and the MessageType to Success. 

         6. Lastly, you need to refresh the list of ShoppingCart, so drag a RefreshData and set the DataSource to GetShoppingCarts and an Ajax Refresh and select the ShoppingCartList.

      3. Now that the True Branch of the If is done, let’s go to the False Branch.

         1. Below the If, drag an Assign and add the following assignments

2. 2. 2. 2. The following steps are similar but instead of making an update to the shopping cart, you need to do a create. 

      3. Your action should look like this.

8. 8. Now, let’s do the OnNotifyRemove action:

      1. In this action, we only need to refresh the shopping cart and notify the “Parent”.

      2. So, first, drag a RefreshData and set the DataSource to GetShoppingCart. Then add a AjaxRefresh and select the ShoppingCartList. 

      3. Lastly, add the Notify Event. 

      4. Your action should look like this

9. 9. Now that the ShoppingCart WebBlock is done, let’s go back to the SampleScreen.

10. In the SampleScreen, create an action to handle the Notify Event. Name this action ShoppingCartNotify. The content of this action is simple, you just need to refresh the list of products. So drag an ResfreshData and AjaxRefresh and select the GetProducts. Your action should look like this.