To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:

What's New in DataFlex 2022

Lesson5 - WebApp Framework 

In this lesson, we'll look at the user interface improvements we made to the web framework.

The first feature I'd like to emphasize is the customizable column layout. And customizable column layout lets the end user reorder columns. And you can also he can also hide columns by using a context menu.

Run the web order example.

Now we see the the order detail list. In this list, you can now just pick up a column and reposition it. 

You can also hide columns using the context menu and going to choose columns. You could already resize columns. But this is also part of the features, that it can store the column layout. It does this by default in local storage. So now if I reload the page, you'll see that the column layout is still there. And even if I go to a different tab, you see that it still has the column layout.

Of course, you can also reset the layout using the Restore layout option that is in the context menu.

Another feature which I'll talk about next is the new footer row. We see it here at the bottom, and it shows the totals in this case. 

  • Add a footer row using pbShowFooter
  • Hide and show a footer row
  • psFooterValue to set value of footer row
  • Customize how it's displayed
  • Free features (When upgraded to 20.1)
  • Context menu
  • Use cWebContextMenu class
  • Can be attached to controls, a browser window, WebList rows, TreeView items and tags

Let's take a look at an example. 

  1. Go to Demo
  2. And click 'Custom Menus'

This view shows several flavors of menus that we have. So we have the cWebMenuList, the cWebMenuButton and now we also have the cWebContextMenu.

The context menu, by default attaches to its parent object, and there's one place inside the view. So if I click anywhere in the view, we get this context menu, it overrides the default browser context menus. If you click in the header, you see the default menu. But if you click inside the view, we get our own custom menu.

You work with menu items just like any other menu. And what's also nice is you can also attach it to list rows. So if I click on this list, it will actually be a specific for this this item. 

Another nice feature we added is that you can now define drag and drop operations within your web applications.

  • Make List rows, TreeView items and tags draggable
  • Drag files from outside the browser
  • Define drop targets, any control, panel or container
  • Specific positions within Lists, TreeViews and TagsForms

We have two demos of this in our OrderEntry application. One is drag and drop within control. 

Here we have two controls. On the right, we have a list. And in this list, you can pick up a list item. And you can drag that to a different position within the list.

On the left we see a tree view. Here I can pick a tree view item, and I can reposition these by dropping them on folders. You see if you hover a folder for a while, it will actually open up. And if you drop, it will also open up and highlight the the item. 

Note: You have to implement the logic for moving the item, yourself in DataFlex code.

The other demo we have is drag and drop between controls.

Here you can on the left, pick up a customer. And you can drop it on any of these rep lists or in this case tags form.

You can also pick them up from one list and drop them on another. So this really shows how flexible this system is. Of course, you can also drop them on the Tree view.

The other drag and drop example is a little bit more hidden. It's in the File Upload.


This example shows you can now drag files from the explorer to the tree view. You can use the context menu to delete the files again. 

So this just shows that you can now drop files on basically any control and handle the file uploads dynamically.

For this feature I'd like to show a little code snippet, just so you get an idea of how you develop this. 

You define a singleton object that defines a drag and drop operation, you can have multiple of these objects. And you basically define one or more drag sources, which determines what controls things can be dragged from. And you define a specific mode that determines what you can drag from this control. And you can specify specify one or more drop targets. And then when  the drag operation is finished, you'll get an own drop event that you can then implement and you can get the direct data from the direct source control and get the drop data from the drop target. 

So now we've seen an overview of all the new features of DataFlex 2022. Besides these features, we also have made a lot of bug fixes in many areas of the product. If you want to get more details, have a look at the What's New, or take a look at the examples. And of course, I hope to see you again soon at one of our conferences. Thanks for watching.