In this post we are going to look at how to provide customized variants of the same List View, and allow an end-user to choose the desired view at runtime. We’ll work with the Contact list view as an example. But first, let’s look at what a view variant is and why you’d want to construct one.
A view variant is simply a variant of a view (the clue’s in the name as we say) and you’d create one if, for example, you had a business object with a large number of properties and you only wished to show a sub set of those properties to a particular user. Okay, so know we know the what’s and the why’s, let’s get on with the how’s shall we?
We’ll use the Module Editor to create two variants of the Contact list view and use a view action to allow the user to switch between them. The first thing we have to do is to add the View Variants module to your MySolution.Module project. For this purpose, find the XXXModule.cs file in the MySolution.Module project displayed in the Solution Explorer. Double-click this file. The Module Designer will be invoked. In the Toolbox, navigate to the DX: XAF Modules tab and drag the ViewVariantsModule item from this page to the Designer's RequiredModules section, like so:
Now we have to rebuild our solution so that the changes made in the Module Designer are visible to the Application Model. Having done that we can invoke the Model Editor for the MySolution.Module the right-click the Application | Views node and select Add | ListView. For the new node, set the ID attribute to the Contact_ListView_AllColumns value and the ClassName attribute to the MySolution.Module.Contact value. Now, right-click the newly created node and select GenerateContent. Columns will be generated using information on the specified class (BOModel | Contact node) and its ancestors. Leave these columns as they are. This List View will represent the “complete” variant for the Contact List View.
Next, navigate to the Application | Views | Contact_ListView node, expand the Variants node and for the Default child node, set the Caption attribute to Few columns. Next, right-click the Variants node and select Add Variant. For the new node, set the Contact_ListView_AllColumns value for the ViewID attribute, set the All columns value for the ID and Caption attributes. Don’t forget to save the changes. :-)
Okay, let’s test it out now, run the application (WinForms or WebForms you choose). Select the Contacts item in the navigation control. For the displayed Contact List View the View Action will be activated. This Action's items represent the Contact_ListView_CompleteVariant and Contact_ListView_ShortenedVariant nodes that were specified in the Model Editor. If you’ve been following along, and you run the WinForms app, then you should see something like this:
Oliver and I also did a video on this subject, you should check it out if you want more information.