Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
In this tutorial, you will create a new tile and include it in the summary section of a workspace, build a new list for a workspace, and create a data cache for the list in the workspace.
For this tutorial, you must access the environment by using Remote Desktop, and you must be provisioned as an administrator on the instance. For more information, see Deploy and access development environments.
Use Microsoft Visual Studio to import the tutorial project. The tutorial project includes the artifacts that you will use to complete this tutorial. Use Visual Studio to open the FMTutorial project and load the data for the tutorial. You will use the FMTDataHelper class to load data for the Fleet Management tutorial. If this is the first tutorial that you’re working on, review Deploy and access development environments, and make sure that you provision your administrator user if you’re working on a local virtual machine (VM).
Use Visual Studio to open the FMTutorial project. If you have Visual Studio open and have already loaded the FMTutorial project, you can continue to the next section.
Before you start to make adjustments to FmtClerkWorkspace form, you will look at the current state of the form to better understand what content is already there and how that contents fits the Operational Workspace pattern.
All workspaces have three required sections:
Operational workspaces can optionally include a panorama section that contains up to two charts (the Section Charts tab page) and a Power BI section.
Now that you understand the content structure of a workspace, you will see how to add content to a workspace. For example, one important piece of information for this workspace might be the number of rentals that are currently in progress. In this section, you will add the required metadata to add a new tile to the Summary section of the FmtClerkWorkspace form to show this information. To make this tile work correctly, you will have to add four metadata artifacts: a query, a menu item, a tile, and a tile button.
All tiles require a backing query to retrieve the correct information.
In Solution Explorer, in the FMTutorial project, right-click the Queries folder, point to Add, and then click New item.
Click Dynamics 365 Items > Data Model > Query. For the Name property, enter FMTRental_Current.
Click Add.
If the new FMTRental_Current query isn’t already open in the designer, double-click it in Solution Explorer.
In the designer, right-click Data Sources, and then click New Data Source.
In the Properties window, set the following properties.
Property | Value |
---|---|
Table | FMTRental |
Dynamics Fields | Yes |
Right-click Ranges, and then click New Range.
In the Properties window, set the following properties.
Property | Value |
---|---|
Field | State |
Value | InProgress |
Right-click Order By, and then click New Field.
In the Properties window, set the following properties.
Property | Value |
---|---|
Direction | Descending |
Data Source | FMTRental |
Field | StartDate |
Press Ctrl+S to save.
In Solution Explorer, in the FMTutorial project, right-click the Menu items folder, point to Add, and then click New item.
Click Dynamics 365 Items > User Interface > Display menu item. Set the Name property to FMTRental_Current.
Click Add.
If the new FMTRental_Current menu item isn’t already open in the designer, double-click it in Solution Explorer.
In the Properties window, set the following properties.
Property | Value |
---|---|
Label | @FMT197 This value corresponds to “Current rentals”. |
Object | FMTRental |
Query | FMTRental_Current |
Press Ctrl+S to save.
In Solution Explorer, in the FMTutorial project, right-click the Tiles folder, point to Add, and then click New item.
Click Dynamics 365 Items > User Interface > Tile. Set the Name property to FMTCurrentRentalsTile.
Click Add.
If the new FMTRental_Current tile isn’t already open in the designer, double-click it in Solution Explorer.
In the Properties window, set the following properties.
Property | Value |
---|---|
Size | ShortWide |
Menu Item Name | FMTRental_Current |
Type | Count |
Press Ctrl+S to save.
Tiles also have a refresh frequency property that controls how often the counts on the tiles are automatically updated. The value that is set for this property should be based on the demand for updated counts, together with query execution speed against volume data. For guidance about how to set this property, see Tile and List Caching for Workspaces. For this lab, the default value of 10 minutes will be enough.
In Solution Explorer, double-click the FmtClerkWorkspace form to open it in the designer.
Right-click Design > PanoramaBody > TileContainer, point to New, and then click Tile Button.
Press Alt+Up arrow four times to move the tile button to the top of TileContainer.
In the Properties window, set the following properties.
Property | Value |
---|---|
Name | FMTCurrentRentalsTile |
Tile | FMTCurrentRentalsTile |
Press Ctrl+S to save.
Use Visual Studio to build and run the updated FmtClerkWorkspace form.
A system administrator can modify tile cache parameters at run time by using the Tile data cache configuration page.
From this page, the system administrator can perform several run-time modifications to a tile cache. For example, the system administrator can enable/disable the data cache, modify the refresh frequency, and enable/disable the ability to manually refresh the count tile. Note that tile caches are registered when a form that has a tile is first opened. Therefore, the list of tiles that is shown in your environment might differ from the list in the preceding illustration.
Next, you will next see how to include an additional list in the workspace. This section will give you some experience with building forms and will also expose you to form patterns. You will add a list of available vehicles, so that you will be able to initiate a new rental by selecting an available vehicle. In this section, you will just add the new list to the new workspace but won't add the action to initiate the rental. To add this list, you will have to complete the following tasks:
In Solution Explorer, double-click the FmtClerkWorkspace form to open it in the designer.
Right-click Design > PanoramaBody > TabbedListSection > TabbedLists, and then click New Tab Page.
In the Properties window, set the following properties.
Property | Value |
---|---|
Name | AvailableVehiclesContainer |
Caption | @FMT199 This value corresponds to “Available vehicles”. |
Right-click AvailableVehiclesContainer, point to New, and then click Form Part. Form Part is the only control type that the Operational Workspace pattern allows here. This control will be used to link to the form that you will build to hold the content for this section.
In the Properties window, set the Name property to AvailableVehiclesPart.
Press Ctrl+S to save.
In Solution Explorer, in the FMTutorial project, right-click the Forms folder, point to Add, and then click New item.
Click Dynamics 365 Items > User Interface > Form. Set the Name property to FMTAvailableVehicles.
Click Add.
If the new FMTAvailableVehicles form isn’t already open in the designer, double-click it in Solution Explorer.
Add the FmtVehicle table as a data source for the form.
Right-click Data Sources, and then click New Data Source.
Click the new data source node. In the Properties window, set the following properties.
Property | Value |
---|---|
Table | FMTVehicle |
Name | FMTVehicle Note: Be sure to specify the value for the Table property first. This property is automatically updated so that it uses the same value. |
Add the FmtVehicleModel table as a second data source for the form.
Right-click Data Sources, and then click New Data Source.
Click the new data source node. In the Properties window, set the following properties.
Property | Value |
---|---|
Table | FMTVehicleModel |
Name | FMTVehicleModel Note: Be sure to specify the value for the Table property first. This property is automatically updated so that it uses the same value. |
Join Source | FMTVehicle |
Link Type | Inner Join |
Notice the Pattern: <select> notation next to Form Design. This indicates the required pattern for this node. Right-click Design, point to Apply pattern, and then click Form Part Section List. This form pattern is typically used by workspace lists.
Click the Pattern tab to see the expected content for this pattern. This information helps guide you as you create content for the form.
In particular, this pattern looks for the following elements:
Right-click Design, point to New, and then click Grid.
In the Properties window, set the following properties. Note: The grid that we are building will contain cards and will be two cards wide.
Property | Value |
---|---|
ExtendedStyle | cardList |
Multi Select | No |
Style | List |
Data Source | FMTVehicle |
Name | VehicleList |
Visible Columns Mode | Fixed |
Visible Columns | 2 |
Right-click the VehicleList grid, point to New, and then click Group.
In the Properties window, set the Name property to VehicleCard.
Right-click the VehicleCard group, point to Apply pattern, and then click Business Card – Three Fields.
Right-click the VehicleCard group, point to New, and then click Image.
In the Properties window, set the following properties.
Property | Value |
---|---|
Data Source | FMTVehicleModel |
Data Method | vehicleImage |
Expand Data Sources > FMTVehicle > Fields.
Drag the VehicleId and DisplayRelationType fields into the VehicleCard group.
Right-click Design, point to New, and then click Group. Update the new group's Name property to HeaderGroup.
The new HeaderGroup element requires a subpattern, because there are two variants for the arrangement of filters and actions in these sections. Right-click HeaderGroup, point to Apply pattern, and then click Filters and Toolbar – Inline.
Right-click HeaderGroup, point to New, and then click Group. Update the new group’s Name property to FilterGroup.
Right-click FilterGroup, point to New, and then click QuickFilter.
In the Properties window, set the following properties.
Property | Value |
---|---|
Name | VehicleQuickFilter |
Target Control | VehicleList |
Press Ctrl+S to save.
In Solution Explorer, in the FMTutorial project, right-click the Queries folder, point to Add, and then click New item.
Click Dynamics 365 Items > Data Model > Query. Set the Name property to FMTAvailableVehicles.
Click Add.
If the new FMTAvailableVehicles query isn’t already open in the designer, double-click it in Solution Explorer.
In the designer, right-click Data Sources, and then click New Data Source.
In the Properties window, set the following properties.
Property | Value |
---|---|
Table | FMTVehicle |
Dynamics Fields | Yes |
Right-click Ranges, and then click New Range.
In the Properties window, set the following properties.
Property | Value |
---|---|
Field | Status |
Value | Available |
Press Ctrl+S to save.
In Solution Explorer, in the FMTutorial project, right-click the Menu items folder, point to Add, and then click New item.
Click Dynamics 365 Items > User Interface > Display menu item. Set the Name property to FMTAvailableVehicles.
Click Add.
If the new FMTAvailableVehicles menu item isn’t already open in the designer, double-click it in Solution Explorer.
In the Properties window, set the following properties.
Property | Value |
---|---|
Object | FMTAvailableVehicles |
Query | FMTAvailableVehicles |
Press Ctrl+S to save.
Use Visual Studio to build and run the updated FmtClerkWorkspace form.
For lists that have expensive queries, or lists where multiple users might use and work from the same workspace, consider caching the list to improve performance. In this section, you will add the necessary artifacts to create a data cache for a list. These artifacts include a query that maps fields to the cache, a table that holds the cache, and a class that provides the mapping between the query and the table. You will then uptake this cache on one of the tabbed lists in the workspace.
The first step is to build a query that will be used to populate the cache table. This query should include all the tables that you want to get your cache data from, and it should limit the results to those records/columns that you want cached.
In Solution Explorer, in the FMTutorial project, right-click the Queries folder, point to Add, and then click New item.
Click Dynamics 365 Items > Data Model > Query. Set the Name property to FMTPickupAndReturnQuery.
Click Add.
If the new FMTPickupAndReturnQuery query isn’t already open in the designer, double-click it in Solution Explorer.
In the designer, right-click Data Sources, and then click New Data Source.
In the Properties window, set the following properties.
Property | Value |
---|---|
Table | FMTRental |
Dynamics Fields | No |
Add the following five fields to the FMTRental data source. For each field, right-click Fields, point to New, and then click Field. In the Properties window, set the Field property as appropriate.
Right-click Ranges, and then click New Range.
In the Properties window, set the following properties.
Property | Value |
---|---|
Field | State |
Value | 1..2 Note: This value will cache rentals that are Ready for Pickup or In Progress. |
Under FMTRental, right-click Data Sources, and then click New Data Source.
In the Properties window, set the following properties.
Property | Value |
---|---|
Table | FMTCustomer |
Dynamics Fields | No |
Add the following three fields to the FMTCustomer data source. For each field, right-click Fields, point to New, and then click Field. In the Properties window, set the Field property as appropriate.
Right-click Relations, and then click New Relation.
In the Properties window, set the following properties.
Property | Value |
---|---|
Join Data Source | FMTRental |
Field | Customer |
Related Field | RecID |
Press Ctrl+S to save.
The second step is to define a table that has the fields that are returned from the cache query. You must also add a SysDataCacheContextId field that will be used to map the cache row to the base framework cache tables. Additionally, you should also define any required relations between this table and other tables, and also any data methods that you require that involve the cached fields.
In Solution Explorer, in the FMTutorial project, right-click the Tables folder, point to Add, and then click New item.
Click Dynamics 365 Items > Data Model > Table. Set the Name property to FMTPickupAndReturnTableCache.
Click Add.
If the new FMTPickupAndReturnTableCache table isn’t already open in the designer, double-click it in Solution Explorer.
In the designer, right-click Fields, and then add the following fields. For each field, the following table shows the data type and the extended data type (EDT) or enum type.
Field type | Field name | EDT/enum type |
---|---|---|
String | FirstName | FirstName (EDT) |
String | LastName | LastName (EDT) |
Container | Image | Bitmap (EDT) |
Int64 | Vehicle | FMTVehicleRecId (EDT) |
Utc Date Time | StartDate | StartDateTime (EDT) |
Utc Date Time | EndDate | EndDateTime (EDT) |
Int64 | SysDataCacheContextId | SysDataCacheContextId (EDT) |
Enum | State | FMTReservationState (Enum) |
String | RentalId | FMTRentalId (EDT) |
In the designer, right-click Relations, point to New, and then click Relation.
In the Properties window, set the following properties.
Property | Value |
---|---|
Name | FMTRental |
Related Table | FMTRental |
Right-click the FMTRental relation, point to New, and then click Normal.
In the Properties window, set the following properties.
Property | Value |
---|---|
Field | RentalId |
Related Field | RentalId |
In the designer, right-click Mappings, and then click New.
In the Properties window, set the Map property to SysDataSetCacheTableMap.
Click Id. In the Properties window, set the Map Field To property to RecId.
Click SysDataCacheContextId. In the Properties window, set the Map Field To property to SysDataCacheContextId. Note: If the field doesn't appear in the list, you might have to save the table first, by pressing Ctrl+S.
Press F7 to view the table’s code. Alternatively, right-click FMTReturnAndPickupTableCache, and then click View Code.
Add the following display methods to the table. The form will use these methods later.
public display FMTName fullName()
{
return this.FirstName + ' ' + this.LastName;
}
public display container customerImage()
{
ImageReference imgRef;
container imgContainer = this.Image;
if(imgContainer == connull())
{
imgRef = ImageReference::constructForSymbol("Person");
imgContainer = imgRef.pack();
}
return imgContainer;
}
public display str rentalVehicle()
{
FMTVehicle vehicle;
str value;
if(this.Vehicle == 0)
{
value = "No vehicle assigned";
}
else
{
select vehicle where vehicle.RecId == this.Vehicle;
value = vehicle.Description;
}
return value;
}
Press Ctrl+S to save.
The third step is to create a class that defines the relationship between the cache query and the catch table.
In Solution Explorer, in the FMTutorial project, right-click the Classes folder, point to Add, and then click New item.
Click Dynamics 365 Items > Code > Class. Set the Name property to FMTPickupAndReturnClass.
Click Add.
If the new FMTPickupAndReturnClass class isn’t already open in the designer, double-click it in Solution Explorer.
Add the following code to the class.
[SysDataSetExtension(classStr(FMTPickupAndReturnClass)), // The name of this class
SysDataSetCacheTableExtension(tableStr(FMTPickupAndReturnTableCache))] // The name of the cache table
class FMTPickupAndReturnClass extends SysDataSetQuery implements SysIDataSet
{
public SysDataCacheRefreshFrequency parmRefreshFrequency()
{
return 600; // Cache refresh frequency, in seconds.
}
public SysQueryableIdentifier parmQueryableIdentifier()
{
return queryStr(FMTPickupAndReturnQuery); // The name of the query.
}
public SysDataCacheTypeId parmCacheTypeId()
{
return tableNum(FMTPickupAndReturnTableCache); // The name of the table.
}
public static FMTPickupAndReturnClass construct()
{
return new FMTPickupAndReturnClass();
}
}
Press Ctrl+S to save.
After you've set up the data cache, you can start to use the cache in your forms. In this section, you will update one of the workspace lists so that it uses the data cache.
In Solution Explorer, double-click the FMTReturningTodayPart form to open it in the designer.
Expand the Data Sources node.
Delete the FMTCustomer data source.
Click the FMTRental data source. In the Properties window, set the Table property to FMTPickupAndReturnTableCache.
Click Design > ReturningTodayGrid. In the Properties window, set the Data Source property to FMTPickupAndReturnTableCache.
Inside ReturningTodayGrid, click CustomerImage. Update the Data Source property to FMTPickupAndReturnTableCache and the Data Method property to customerImage.
Inside ReturningTodayGrid, click FirstNameCopy1. Update the Data Source property to FMTPickupAndReturnTableCache and the Data Method property to fullName.
Press F7 to view code for the form.
Instrument the form so that it can react to data caching, as shown in the following code.
[Form]
public class FMTReturningTodayPart extends FormRun implements SysIDataSetConsumerForm
{
public void registerDatasourceOnQueryingEvent()
{
FMTPickupAndReturnTableCache_DS.OnQueryExecuting +=
eventhandler(this.parmDataSetFormQueryEventHandler().prepareDataSet);
}
}
Press Ctrl+S to save.
Actions that are performed from the workspace might expect records from the base tables. Therefore, these actions might have to be updated so that they work with the cache table. In this example, the FmtCompleteRecord form currently expects a FMTRental record as context. Therefore, this form must be updated so that it works correctly with either a base rental record or a cache table record as context.
In Solution Explorer, double-click the FmtCompleteRental form to open it in the designer.
Press F7 to view the form’s code.
public void init()
{
//If this form was opened with a Rental as context
if(element.args() != null && element.args().record() != null && element.args().record().TableId == tablenum(FMTRental))
{
//Get the Rental context
rentalDS = FormDataUtil::getFormDataSource(element.args().record());
rental = element.args().record();
if(rental != null)
{
select firstonly forupdate vehicle where vehicle.RecId == rental.Vehicle;
}
}
super();
}
Update the init() method so that it matches the following code.
public void init()
{
//If this form was opened with a record context
if(element.args() != null && element.args().record() != null))
{
//Get that context
rentalDS = FormDataUtil::getFormDataSource(element.args().record());
if(element.args().record().TableId == tableNum(FMTPickupAndReturnTableCache))
{
FMTPickupAndReturnTableCache cacheRecord = element.args().record();
select firstonly forupdate rental where rental.RentalId == cacheRecord.RentalId;
}
else if(element.args().record().TableId == tableNum(FMTRental))
{
rental = element.args().record();
}
if(rental != null)
{
select firstonly forupdate vehicle where vehicle.RecId == rental.Vehicle;
}
}
super();
}
Press Ctrl+S to save.
Use Visual Studio to build and run the updated FmtClerkWorkspace form.
You must make sure that your lists remain up to date after a user performs an action that should remove a record from the list (for example, the user completes a rental). In this section, we will instrument that action to help guarantee that the workspace reacts appropriately.
In Solution Explorer, double-click the FmtCompleteRental form to open it in the designer.
Press F7 to view the code for the form.
Locate the clicked() code for OKButton. Near the end of this method is a research call on the calling form’s data source. Just before that line of code, add the following if statement to delete the processed rental from the cache table.
. . .
if(rentalDS.table() == tableNum(FMTPickupAndReturnTableCache))
{
//Delete updated record from backing cache
FMTPickupAndReturnTableCache cacheRecord = element.args().record();
cacheRecord.delete();
}
rentalDS.research(true);
}
Press Ctrl+S to save.
Use Visual Studio to build and run the updated FmtClerkWorkspace form.
Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreTraining
Learning path
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
Documentation
Build operational workspaces - Finance & Operations | Dynamics 365
Learn about workspaces and the patterns and subpatterns that are used to build operational workspaces, including various examples.
Tile and list caching for workspaces - Finance & Operations | Dynamics 365
Learn about framework support for caching data that is used for tiles and lists, so that workspaces perform well and are responsive.
Configure and filter workspaces - Finance & Operations | Dynamics 365
Access an overview about how to configure and filter workspaces, including outlines on workspace-wide filters.