Using Mashup Views

Mashup Views are used to display data from multiple ispecs in a single View for creating an integrated experience. You can create mashup Views by extending the DataViewModel of a specific ispec. This involves creating a partial class of the DataViewModel that is generated when the DataViewModel project is generated by the Client Framework. Creating a partial class allows a DataViewModel to be extended without the risk of overriding the changes made by you when the same DataViewModel is regenerated.

To extend the DataViewModel, perform the following:

  1. In the Solution Explorer window, right-click the DataViewModels project, point to Add, and then select Folder from the context menu.

    A folder with the default name “Folder1” appears under the DataViewModels project.

  2. Rename the folder from “Folder1” to an appropriate name; for example, CustomizedViewModels.

  3. Right-click the folder, point to Add, and then select Class from the context menu.

    The Add New Item dialog box appears.

  4. In the Templates pane, select Class.

  5. In the Name box, enter the same class name as the DataViewModel class you want to extend. For example, if you have a class named SALEViewModel.cs in the DataViewModels project, you must enter SALEViewModel in the Name box.

  6. Click Add.

    The class appears under the new folder (for example, CustomizedViewModels) in the Solution Explorer window.

  7. Double-click the class, and then add a partial class as shown in the following code snippet:

    public partial class SaleViewModel
{
}

    In this code snippet, SaleViewModel is the name of the partial class. This name should be the same as the class name in the DataViewModel, which you want to extend.

  8. Add new properties in the partial class to display data from any other ispecs of your choice.

    For example, if you want to display data from the CINQViewModel and PRODViewModel, you must add the following code in the partial class:

    public CINQViewModel Cust
{
		get { return this.Get<CINQViewModel>("Cust", () => this.CreateViewModel<CINQViewModel>()); }
		set { this.Set<CINQViewModel>("Cust", value); }
}

public PRODViewModel Prod
{
		get { return this.Get<PRODViewModel>("Prod", () => this.CreateViewModel<PRODViewModel>()); }
		set { this.Set<PRODViewModel>("Prod", value); }
}

  9. Populate the ViewModels when a value is selected from a control in the View.

    For example, if you want to populate the Cust and Prod ViewModels when you select a Customer or Product from a control added onto the View, add the following code snippet:

    protected override void PostInitialize()
{
   this.PropertyChanged += (o, e) =>
   {
         if (e.PropertyName == "CUSTOMER" && !string.IsNullOrEmpty(this.CUSTOMER))
         {
               this.Cust.CUSTOMER = this.CUSTOMER;
               this.Cust.CmdTransmit.Execute(null);

               this.CmdTransmit.Execute("Action, I");
         }
         else if (e.PropertyName == "PRODUCT" && !string.IsNullOrEmpty(this.PRODUCT))
         {
               this.Prod.PRODUCT = this.PRODUCT;
               this.Prod.CmdTransmit.Execute("_UserMAINT, INQ");
         }
      } 
   };

As shown in the code snippet, when you select an item from the Customer or Product list, the following details are retrieved:

Similarly, when you select an item from the PRODUCT list, the following detail is retrieved:

The fields in the SALE, CINQ, and PROD ispecs are populated with the information sent at runtime.

You can now display the information on the View by using the Binding keyword in the XAML code, as shown in the following code snippet:

<TextBlock Grid.Row="0" Grid.Column="1" Text="Recent Transactions">
<ListView Grid.Row="1" Grid.Column="1" ItemSource="{Binding Cust.CopyFromItems}" Width="430">

As shown in the code snippet, a field with the label “Recent Transactions” displays the CopyFrom items from the Cust ispec. Therefore, in the ItemSource you must bind it to Cust.CopyFromItems to display the information in the appropriate control on the View.

To display information such as Stock Balance and Sale Price in a text box control, you can add the following code snippet to the XAML code:

<TextBlock Margin="20,0", Width="90" Text="Stock" Style="{StaticResource TitleStyle}">
<TextBlock Margin="0,0", Width="100" Text="{Binding Prod.STOCKBAL}">
<TextBlock Margin="20,0", Width="90" Text="Sell Price" Style="{StaticResource TitleStyle}">
<TextBlock Margin="0,0", Width="100" Text="{Binding Prod.SELLPRICE}">