Mobile apps

2019-03-15

Microsoft Dynamics 365 for Finance and Operations

How to setup custom workspaces for mobile apps in Dynamics 365 for Finance and Operations

First of all you need to enable the Mobile apps menu if it’s not enabled. To do so, add “&mode=Mobile” to the current URL in D365FO. If you’re in standart development VM, the complete URL should be like this: https://usnconeboxax1aos.cloud.onebox.dynamics.com/?cmp=USMF&mi=DefaultDashboard&mode=Mobile

You must be the system administrator to create, edit and publish mobile workspaces.

In second place is important to relate that all the informations that i used to build an app is in the official Microsoft’s whitepaper.

In the menu Mobile apps you can see all Workspaces (standart and customized) and their status (un/published).

The actions you’re able to perform from this screen are Publish, Edit, Export, Delete, Import and Create a Worskpace, as you can see by the image bellow: !(Mobile workspace actions)[TODO: Add image Mobile workspace actions.png]

Publish: Allows the app users to see the modifications that were made in the selected workspace.
Edit: Allows you to modify the selected workspace.
Export: Generates and download a .xml file that contains all the modifications made to the selected workspace.
Delete: Excludes the selected workspace from the mobile apps dashboard.
Import: Upload the .xml file generated by the Export action and import all the modifications contained on it.

Tutorial

1 In the mobile apps dashboard, create a new workspace.
2 In the Name field, put the value Customers.
3 Click Done.
4 Click Publish so you can see the new workspace in your mobile device.
5 In your mobile device app store, download the app Microsoft Dynamics 365 Unified Operations.
- 5.1 You will be instructed by the app to inform the URL of your company’s instance of D365FO, for example, https://usnconeboxax1aos.cloud.onebox.dynamics.com.
  - 5.1.1 It’s important to know that the URL must be public in order of your mobile device app to find the AOSService instance.
- 5.2 Accept the agreement, inform your credentials and check the Customer workspace in the mobile app dashboard.
  - 5.3 If it’s not, try to publish again.
6 Select the recently created and published Customers workspace.
7 Click Edit.
8 Click Add page.
- 8.1 Inform the page name as All customers.
- 8.2 Inform the page description as All customers.
- 8.3 Hit Done
- 8.4 Now, you are able to select fields for you newly created page.
  - 8.4.1 Navigate to Accounts receivable > Customers > All customers. The page list with all the customers will open normally.
  - 8.4.2 Click the Select fields button and look for red plus buttons that will apear on the screen. Those are the fields you can select to add in your page. In the background Dynamics is recognizing the process you are executing by catching the table and fields, with their business logic preserved.
  - 8.4.3 Select the fields Account, Name, Invoice account, Customer group, Currency, Telephone by clicking the red plus button next to them. Check that in the field list, in the mobile app framework, the first line correspond to a Grid component, identified by the framework according to the process you are executing, as mentioned.
- 8.5 Let’s create an action for this app page. Click the Actions tab in the mobile app framework.
  - 8.5.1 Hit the Add action dropdown dialog.
    - 8.5.1.1 Inform the action title as New customer.
    - 8.5.1.2 Inform the action description as New customer.
    - 8.5.1.3 Click Done
  - 8.5.2 This can be a little trick, because now we need to build the action, and this should be made by creating a new customer or, in other words, by executing the process, so the framework can identify the action your are performing and then enable the fields for your selection.
  - 8.5.3 If you’re seeing the side screen to create a new customer, click Select fields in order to begin the fields selection procedure. Don’t worry if there’s some field that you want to select but is not highlighted in red because even so the system will identify this field.
  - 8.5.4 What you need to do now is create a new customer, by informing the fields you want to be in you app page. You’ll probably realize that those fields will appear in the field list, on the mobile framework.
    - 8.5.4.1 As a reference, you can select the fields: Customer account, Name, Customer group and Organization number.
  - 8.5.5 Click Ok in the side screen to complete the customer creation, after that hit Back in the mobile framework and your action will be created. You can publish the workspace again in order to test this action.
- 8.6 Lookups
  - 8.6.1 We can build a lookup in mobile apps by creating pages.
    - 8.6.1.1 Navigate to Accounts receivable > Setup > Customer groups.
    - 8.6.1.2 Hit Add page in the mobo framework.
      - 8.6.1.2.1 Inform the page title as All customer groups.
      - 8.6.1.2.2 Hit Done.
    - 8.6.1.3 Get back to the New customer action, recently created.
    - 8.6.1.4 In the field list, select the field Customer group, and click Properties.
      - 8.6.1.4.1 Note the section ADD LOOKUP PAGE.
  - 8.6.2 You can select another page in your app to be the lookup for on specific field. The system can identify the most appropriate pages for the same type.
  - 8.6.3 You need to inform the field data and you need to inform the field to display as well.
- 8.7 Last but not least at all, you can create logic for you app. This can be done, by using Javascript. There are some pre-defined functions that can be called and overrided in order to customize some process. For this specific tutorial, we are going to hide, from the Customer workspace main page, the All customer groups page, once we want that page be visible only for the lookup purpose. So…
  - 8.7.1 Create a file in your computer called Customers.js and open it in some IDE or text editor of your preference.
  - 8.7.2 The file contains a basic content template. You can see the template bellow:

function main(metadataService, dataService, cacheService, $q) {
    let workspaceInitialization = function(appMetadata) {
        
    };

    let pageInitialization = function(pageMetadata, context) {

    };

    let actionInitialization = function(taskMetadata, context, taskData) {

    };

    return {
        appInit: workspaceInitialization,
        pageInit: pageInitialization,
        taskInit: actionInitialization
    };
}

8 > 8.7 > 8.7.2…
- 8.7.3 You can see that we can override the initialization logic of the workspace, of a page or even of an action.
- 8.7.4 In our example, we want to hide the All customer group page in the workspace initialization.
  - 8.7.4.1 Inside the workspaceInitialization function put the following line of code:

    ...
    
    let workspaceInitialization = function(appMetadata) {
        metadataService.hideNavigation("All-customer-groups");
    };

   ...

8 > 8.7 > 8.7.4 > 8.7.4.1…
- 8.7.4.2 Note that we are using the Page name, that you can see by clicking the Edit button when you select the All customer groups page in the mobile framework.
- 8.7.5 Save the file, hit Logic in the workspace Customers. Select the option FROM FILE SYSTEM and browse to your Javascript file. Hit Done and that’s it.
9 Publish you workspace and you should be able to test all your modifications in the mobile app.
10 You read and download the XML file generated by the mobile framework for this app as well as the Javascript file.

Customers app download

 Turn on/off maintenance mode Task recorder for creating documents 