Mobile invoice approvals

Important

Welcome to the documentation for Microsoft Dynamics 365 for Operations on docs.microsoft.com. We are migrating our content here from the Dynamics 365 for Operations Help Wiki.

Mobile capabilities in Microsoft Dynamics 365 for Operations let a business user design mobile experiences. For advanced scenarios, the platform also lets developers extend the capabilities as they desire. The most effective way to learn some of the new concepts on mobile is to go through the process of designing a few scenarios. This topic is intended to provide a practical approach to designing mobile scenarios by taking vendor invoice approvals for mobile as a use case. This topic should help you design other variations of the scenarios and can also be applied to other scenarios that aren’t related to vendor invoices.

Prerequisites

Prerequisite Description
Mobile handbook pre-read (/dynamics365/operations/dev-itpro/mobile-apps/mobile-platform.md)
Dynamics 365 for Operations An environment that has Microsoft Dynamics 365 for Operations version 1611 and Microsoft Dynamics for Operations platform update 3 (November 2016)
Install hotfix KB 3204341. Task recorder can erroneously record two Close commands for dropdown dialogs this is included in Dynamics 365 for Operation platform update 3 (November 2016 update)
Install hotfix KB 3207800. This hotfix enables attachments to be viewed on the mobile client this is included in Dynamics 365 for Operation platform update 3 (November 2016 update).
Install hotfix KB 3208224. Application code for the mobile vendor invoice approval application this is included in Microsoft Dynamics AX application 7.0.1 (May 2016).
An Android or iOS or a Windows device that has the mobile app installed for Dynamics 365 for Operations Search for the app in the appropriate app store.

Introduction

Mobile approvals for vendor invoices require the three hotfixes that are mentioned in the “Prerequisites” section. These hotfixes don’t provide a workspace for the invoice approvals. To learn what a workspace is in the context of mobile, read the mobile handbook that is mentioned in the “Prerequisites” section. The invoice approvals workspace must be designed.

Every organization orchestrates and defines its business process for vendor invoices differently. Before you design a mobile experience for vendor invoice approvals, you should consider the following aspects of the business process. The idea is to use these data points as much as possible to optimize the user experience on the device.

  • What fields from the invoice header will the user want to see in the mobile experience, and in what order?
  • What fields from the invoice lines will the user want to see in the mobile experience, and in what order?
  • How many invoice lines are there in an invoice? Apply the 80-20 rule here, and optimize for the 80 percent.
  • Will users want to see accounting distributions (invoice coding) on the mobile device during reviews? If the answer to this question is yes, consider the following questions:
    • How many accounting distributions (extended price, sales tax, charges, splits, and so on) are there for an invoice line? Again, apply the 80-20 rule.
    • Do the invoices also have accounting distributions on the invoice header? If so, should these accounting distributions be available on the device?
Note

This topic doesn’t explain how to edit accounting distributions, because this functionality isn’t currently supported for mobile scenarios.

  • Will users want to see attachments for the invoice on the device?

The design of the mobile experience for invoice approvals will differ, depending on the answers to these questions. The objective is to optimize the user experience for the business process on mobile in an organization. In the rest of this topic, we will look at two scenario variations that are based on different answers to the preceding questions.

As a general guidance, when working with the mobile designer, make sure to 'publish' the changes to prevent losing the updates.

Designing a simple invoice approval scenario for Contoso

Scenario attribute Answer
What fields from the invoice header will the user want to see in the mobile experience, and in what order?
  1. Vendor name
  2. Invoice total
  3. Invoice account
  4. Invoice number
  5. Invoice date
  6. Invoice description
  7. Due date
  8. Invoice currency
What fields from the invoice lines will the user want to see in the mobile experience, and in what order?
  1. Procurement category
  2. Quantity
  3. Unit price
  4. Line net amount
  5. 1099 amount
How many invoice lines are there in an invoice? Apply the 80-20 rule here, and optimize for the 80 percent. 1
Will users want to see accounting distributions (invoice coding) on the mobile device during reviews? Yes
How many accounting distributions (extended price, sales tax, charges, and so on) are there for an invoice line? Again, apply the 80-20 rule. Extended price: 2 Sales tax: 0 Charges: 0
Do the invoices also have accounting distributions on the invoice header? If so, should these accounting distributions be available on the device? Not used
Will users want to see attachments for the invoice on the device? Yes

Create the workspace

  1. In a browser, open Dynamics 365 for Operations, and sign in.
  2. After you’ve signed in, append &mode=mobile to the URL as shown in the following example, and refresh the page: https://<yoururl>/?cmp=usmf&mi=DefaultDashboard&mode=mobile
  3. Click the Settings (gear) button in the upper right of the page, and then click Mobile app. The mobile app designer must show up just as Task recorder shows up.
  4. Click Add to create a new workspace. For this example, name the workspace My approvals.
  5. Enter a description.
  6. Select a workspace color. The workspace color will be used for the overall style of the mobile experience for this workspace.
  7. Select an icon for the workspace.
  8. Click Done
  9. Click Publish workspace to save the changes

Vendor invoices assigned to me

The first mobile page that you should design is the list of invoices that are assigned to the user for review. To design this mobile page, use the VendMobileInvoiceAssignedToMeListPage page in Dynamics 365 for Operations. Before you complete this procedure, make sure that at least one vendor invoice is assigned to you for review, and that the invoice line has two distributions. This setup meets the requirements for this scenario.

  1. In the Dynamics 365 for Operations URL, replace the name of the menu item with VendMobileInvoiceAssignedToMeListPage to open the mobile version of the Pending vendor invoices assigned to me list page in the Accounts payable module. Depending on the number of invoices that you have in your system assigned to you, this page will show those invoices. To find a specific invoice, you can use the filter on the left. However, we don’t require a specific invoice for this example. We just require some invoice assigned to you which is going to allow you to design the mobile page. The new pages that are available have been designed specifically for developing mobile scenarios for vendor invoice. Therefore, you must use these pages. The URL should resemble the following URL, and after you enter it, the page that is shown in the illustration must appear: https://<yourURL>/?cmp=usmf&mi=VendMobileInvoiceAssignedToMeListPage&mode=mobile Pending vendor invoices assigned to me page
  2. Click the Settings (gear) button in the upper right of the page, and then click Mobile app
  3. Select your workspace and click Edit
  4. Click Add page to create the first mobile page.
  5. Enter a name, such as My vendor invoices, and a description, such as Vendor invoices assigned to me for review.
  6. Click Done.
  7. In the mobile designer, on the Fields tab, click Select fields. The columns on the list page must resemble the following illustration. Columns on the Pending vendor invoices assigned to me page
  8. Add the required columns from the list page that must be shown to the users in the mobile page. The order in which you add is the order in which the fields will be displayed to the end user. The only way to change the ordering of the fields will be by re-selecting all the fields. Based on the requirements for this scenario, the following eight fields are required. However, some users might consider eight fields too much information to have on a mobile device. Therefore, we will show only the most important fields in the mobile list view. The remaining fields will appear in the details view that we will design later. For now, we will add the following fields. Click the plus sign (+) in these columns to add to the mobile page.

    1. Vendor name
    2. Invoice total
    3. Invoice account
    4. Invoice number
    5. Invoice date

    After the fields are added, the mobile page must resemble the following illustration. Page after fields are added

  9. You must also add the following columns now, so that we can enable workflow actions later.

    1. Show complete task
    2. Show delegate task
    3. Show recall task
    4. Show reject task
    5. Show request completion task
    6. Show resubmit task
  10. Click Done to exit edit mode.

  11. Click Back and then Done to exit the workspace
  12. Click Publish workspace to save your work.
  13. Enable Display invoice total on pending vendor invoices list in accounts payable parameters form under Invoice. Note that, only by enabling this parameter, invoice totals will be calculated to be displayed on the pending vendor invoices list page. This is a new capability as part of the pre-requisite hot fix 3208224.

Vendor invoice details

To design the invoice details page for mobile, use the VendMobileInvoiceHeaderDetails page in Dynamics 365 for Operations. Note that, depending on the number of invoices that you have in your system, this page shows the oldest invoice (the invoice that was created first). To find a specific invoice, you can use the filter on the left. However, we don’t require a specific invoice for this example. We just require some invoice data so that we can design the mobile page. Workflow page

  1. In the Dynamics 365 for Operations URL, replace the name of the menu item with VendMobileInvoiceHeaderDetails to open the form
  2. Open the mobile designer from the Settings (gear) button.
  3. Click the Edit button to start edit mode in the workspace.
  4. Select the My vendor invoices **page that you created earlier, and then click **Edit.
  5. On the Fields tab, click the Grid column heading.
  6. Click Properties > Add page. Note: When you click the Grid heading and add a page, the relationship with the details page is established automatically.
  7. Enter a page title, such as Invoice details, and a description, such as View invoice header and line details.
  8. Click Select fields. Note that, the order in which you add is the order in which the fields will be displayed to the end user. The only way to change the ordering of the fields will be by re-selecting all the fields.
  9. Add the following fields from the header, based on the requirements for this scenario:

    1. Vendor name
    2. Invoice total
    3. Invoice account
    4. Invoice number
    5. Invoice date
    6. Invoice description
    7. Due date
    8. Invoice currency
  10. Add the following fields from the lines grid on the page:

    1. Procurement category
    2. Quantity
    3. Unit price
    4. Line net amount
    5. 1099 amount
  11. After all the fields from the previous two steps have been added, click Done. The page must resemble the following illustration. Page after fields are added

  12. Click Done to exit edit mode.
  13. Click Back and then Done to exit the workspace
  14. Click Publish workspace to save your work

Workflow actions

To add workflow actions, use the VendMobileInvoiceHeaderDetails page in Dynamics 365 for Operations. To open this page, replace the name of the menu item in the URL, as you did earlier. Then open the mobile designer from the Settings (gear) button. Follow these steps to add workflow actions on the details page.

  1. Click the Edit button to start edit mode in the workspace.
  2. Select the Invoice details page that you created earlier, and then click Edit.
  3. On the Actions tab, click Add action.
  4. Enter an action title, such as Approve, and a description, such as Approve invoice. Note that the action title that you enter here becomes the name of the action that is shown to the user in the mobile app.
  5. Click Done.
  6. Click Select fields.
  7. Go through the workflow process on the VendMobileInvoiceHeaderDetails page, and complete the action that you wanted to record. Make sure that you enter workflow comments during this process, so that a comments field is also included in the mobile experience.
  8. After the workflow action is run, click Done to complete the Select fields task.
  9. Click Done to exit edit mode.
  10. Click Back and then Done to exit the workspace
  11. Click Publish workspace to save your work
  12. Repeat the steps 3 through 11 to record all the required workflow actions. Note that, it is a requirement to have invoices assigned to you that are in a state to make the workflow actions available to you that you are going to design for.
  13. Open Notepad or Microsoft Visual Studio, and paste the following code. Save the file as a .js file. This code does two things:
    1. It hides the extra workflow-related columns that we added earlier on the mobile list page. We added these columns so that the app has that information in context and can do the next step.
    2. Based on the workflow step that is active, it applies logic to show only those actions.

Note that, the name of the pages and other controls in the JS code must be the same from the workspace.

  1. function main(metadataService, dataService, cacheService, $q) { return { appInit: function (appMetadata) { // Hide controls that need to be present, but not visible metadataService.configureControl('My-vendor-invoices', 'ShowAccept', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowApprove', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowReject', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowDelegate', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowRequestChange', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowRecall', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowComplete', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowResubmit', { hidden: true }); }, pageInit: function (pageMetadata, params) { if (pageMetadata.Name == 'Invoice-details') { // Show/hide workflow actions based on workflow step metadataService.configureAction('Accept', { visible: true }); metadataService.configureAction('Approve', { visible: true }); metadataService.configureAction('Reject', { visible: true }); metadataService.configureAction('Delegate', { visible: true }); metadataService.configureAction('Request-change', { visible: true }); metadataService.configureAction('Recall', { visible: true }); metadataService.configureAction('Complete', { visible: true }); metadataService.configureAction('Resubmit', { visible: true });

                   var entityContextParts = params.pageContext.split(':');
                   var data = dataService.getEntityData(entityContextParts[0], entityContextParts[1]);
    
                   var acceptControl = data.getPropertyValue('VendInvoiceInfoTable/showAccept');
                   var approveControl = data.getPropertyValue('VendInvoiceInfoTable/showApprove');
                   var rejectControl = data.getPropertyValue('VendInvoiceInfoTable/showReject');
                   var delegateControl = data.getPropertyValue('VendInvoiceInfoTable/showDelegate');
                   var requestChangeControl = data.getPropertyValue('VendInvoiceInfoTable/showRequestChange');
                   var recallControl = data.getPropertyValue('VendInvoiceInfoTable/showRecall');
                   var completeControl = data.getPropertyValue('VendInvoiceInfoTable/showComplete');
                   var resubmitControl = data.getPropertyValue('VendInvoiceInfoTable/showResubmit');
    
                   var showAcceptControl = Boolean(acceptControl == 1);
                   var showApproveControl = Boolean(approveControl == 1);
                   var showRejectControl = Boolean(rejectControl == 1);
                  var showDelegateControl = Boolean(delegateControl == 1);
                   var showRequestChangeControl = Boolean(requestChangeControl == 1);
                   var showRecallControl = Boolean(recallControl == 1);
                   var showCompleteControl = Boolean(completeControl == 1);
                   var showResubmitControl = Boolean(resubmitControl == 1);
    
                   metadataService.configureAction('Accept', { visible: showAcceptControl });
                   metadataService.configureAction('Approve', { visible: showApproveControl });
                   metadataService.configureAction('Reject', { visible: showRejectControl });
                   metadataService.configureAction('Delegate', { visible: showDelegateControl });
                   metadataService.configureAction('Request-change', { visible: showRequestChangeControl });
                   metadataService.configureAction('Recall', { visible: showRecallControl });
                   metadataService.configureAction('Complete', { visible: showCompleteControl });
                 metadataService.configureAction('Resubmit', { visible: showResubmitControl });
               }
             },
       };
    }
    
  2. Upload the code file to the workspace by selecting the Logic tab

  3. Click Done to exit edit mode.
  4. Click Back and then Done to exit the workspace
  5. Click Publish workspace to save your work

Vendor invoice attachments

  1. Click the Settings (gear) button in the upper right of the page, and then click Mobile app
  2. Click the Edit button to start edit mode in the workspace.
  3. Select the Invoice details **page that you created earlier, and then click **Edit.
  4. Set the Document management option to Yes as shown below. Note: If there are no requirements to show attachments on the mobile device, you can leave this option set to No, which is the default setting.
  5. docmanagement
  6. Click Done to exit edit mode.
  7. Click Back and then Done to exit the workspace
  8. Click Publish workspace to save your work

Vendor invoice line distributions

The requirements for this scenario confirm that there will be only line-level distributions, and that an invoice will always have only one line. Because this scenario is simple, the user experience on the mobile device must also be simple enough that the user doesn’t have to drill down several levels to view the distributions. Vendor invoices in Dynamics 365 for Operations include the option of showing all distributions from the invoice header. This experience is what we need for the mobile scenario. Therefore, we will use the VendMobileInvoiceAllDistributionTree page to design this part of the mobile scenario.

Note

Knowing the requirements helps us decide which specific page to use and how exactly to optimize the mobile experience for the user when we design the scenario. In the second scenario, we will use a different page to show the distributions, because the requirements for that scenario differ.

  1. In the URL, replace the name of the menu item, as you did before. The page that appears should resemble the following illustration. All distributions page
  2. Open the mobile designer from the Settings (gear) button.
  3. Click the Edit button to start edit mode in the workspace. Note: You will see that two new pages were created automatically. The system creates these pages, because you turned on document management in the previous section. You can ignore these new pages.
  4. Click Add page.
  5. Enter a page title, such as View accounting, and a description, such as View accounting for the invoice.
  6. Click Done.
  7. On the Fields tab, click Select fields, select the following fields from the distributions page, and then click Done:
    1. Amount
    2. Currency
    3. Ledger account
Note

We didn’t select the Description column from the distributions grid, because the requirements for this scenario confirmed that the extended price is the only amount that there will be distributions for. Therefore, the user won’t require another field to determine the amount type that the distribution is for. However, in the next scenario, we will use this information, because the requirements for that scenario specify that other amount types have distributions (for example, sales tax).

  1. Click Done to exit edit mode.
  2. Click Back and then Done to exit the workspace
  3. Click Publish workspace to save your work

Note: The View accounting mobile page isn’t currently linked to any of the mobile pages that we have designed so far. Because the user should be able to navigate to the View accounting page from the Invoice details page on the mobile device, we must provide navigation from the Invoice details page to the View accounting page. We establish this navigation by using additional logic via JavaScript.

  1. Open the .js file that you created earlier, and add the lines that are highlighted in the following code. This code does two things:
    1. It helps guarantee that users can’t navigate directly from the workspace to the View accounting page.
    2. It establishes a navigation control from the Invoice details page to the View accounting page.
Note

The name of the pages and other controls in the JS code must be the same from the workspace.

  1. function main(metadataService, dataService, cacheService, $q) { return { appInit: function (appMetadata) { // Hide controls that need to be present, but not visible metadataService.configureControl('My-vendor-invoices', 'ShowAccept', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowApprove', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowReject', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowDelegate', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowRequestChange', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowRecall', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowComplete', { hidden: true }); metadataService.configureControl('My-vendor-invoices', 'ShowResubmit', { hidden: true }); // Hide pages not applicable for root navigation metadataService.hideNavigation('View-accounting'); //Link to view accounting metadataService.addLink('Invoice-details', 'View-accounting', 'View-accounting-nav-control', 'View accounting', true); }, pageInit: function (pageMetadata, params) { if (pageMetadata.Name == 'Invoice-details') { // Show/hide workflow actions based on workflow step metadataService.configureAction('Accept', { visible: true }); metadataService.configureAction('Approve', { visible: true }); metadataService.configureAction('Reject', { visible: true }); metadataService.configureAction('Delegate', { visible: true }); metadataService.configureAction('Request-change', { visible: true }); metadataService.configureAction('Recall', { visible: true }); metadataService.configureAction('Complete', { visible: true }); metadataService.configureAction('Resubmit', { visible: true });

                   var entityContextParts = params.pageContext.split(':');
                   var data = dataService.getEntityData(entityContextParts[0], entityContextParts[1]);
    
                   var acceptControl = data.getPropertyValue('VendInvoiceInfoTable/showAccept');
                   var approveControl = data.getPropertyValue('VendInvoiceInfoTable/showApprove');
                   var rejectControl = data.getPropertyValue('VendInvoiceInfoTable/showReject');
                   var delegateControl = data.getPropertyValue('VendInvoiceInfoTable/showDelegate');
                   var requestChangeControl = data.getPropertyValue('VendInvoiceInfoTable/showRequestChange');
                   var recallControl = data.getPropertyValue('VendInvoiceInfoTable/showRecall');
                   var completeControl = data.getPropertyValue('VendInvoiceInfoTable/showComplete');
                   var resubmitControl = data.getPropertyValue('VendInvoiceInfoTable/showResubmit');
    
                   var showAcceptControl = Boolean(acceptControl == 1);
                   var showApproveControl = Boolean(approveControl == 1);
                 var showRejectControl = Boolean(rejectControl == 1);
                   var showDelegateControl = Boolean(delegateControl == 1);
                   var showRequestChangeControl = Boolean(requestChangeControl == 1);
                   var showRecallControl = Boolean(recallControl == 1);
                   var showCompleteControl = Boolean(completeControl == 1);
                   var showResubmitControl = Boolean(resubmitControl == 1);
    
                   metadataService.configureAction('Accept', { visible: showAcceptControl });
                   metadataService.configureAction('Approve', { visible: showApproveControl });
                   metadataService.configureAction('Reject', { visible: showRejectControl });
                   metadataService.configureAction('Delegate', { visible: showDelegateControl });
                   metadataService.configureAction('Request-change', { visible: showRequestChangeControl });
                   metadataService.configureAction('Recall', { visible: showRecallControl });
                   metadataService.configureAction('Complete', { visible: showCompleteControl });
                   metadataService.configureAction('Resubmit', { visible: showResubmitControl });
    }
             },
       };
    }
    
  2. Upload the code file to the workspace by selecting the Logic tab to overwrite the previous code

  3. Click Done to exit edit mode.
  4. Click Back and then Done to exit the workspace
  5. Click Publish workspace to save your work

Validation

From your mobile device, open the app, and connect to your Dynamics 365 for Operations instance. Make sure that you sign in to the company where vendor invoices are assigned to you for review. You should be able to perform the following actions:

  • See the My approvals workspace.
  • Drill into the My approvals workspace and see the My vendor invoices page.
  • Drill into the My vendor invoices page and see the list of invoices that are assigned to you.
  • Drill into one of the invoices, and see the invoice header details and line details.
  • On the details page, see a link to attachments, and use this link to navigate to the attachments list and view the attachments.
  • On the details page, see a link to the View accounting page, and use this link to navigate to the distributions page and view the distributions.
  • On the details page, click the Actions menu at the bottom, and perform workflow actions that are applicable to the workflow step.

Designing a complex invoice approval scenario for Fabrikam

Scenario attribute Answer
What fields from the invoice header will the user want to see in the mobile experience, and in what order?
  1. Vendor name
  2. Invoice amount
  3. Invoice account
  4. Invoice number
  5. Invoice date
  6. Invoice description
  7. Due date
  8. Invoice currency
What fields from the invoice lines will the user want to see in the mobile experience, and in what order?
  1. Procurement category
  2. Quantity
  3. Unit price
  4. Line net amount
  5. 1099 amount
How many invoice lines are there in an invoice? Apply the 80-20 rule here, and optimize for the 80 percent. 5
Will users want to see accounting distributions (invoice coding) on the mobile device during reviews? Yes
How many accounting distributions (extended price, sales tax, charges, and so on) are there for an invoice line? Again, apply the 80-20 rule. Extended price: 2 Sales tax: 2 Charges: 2
Do the invoices also have accounting distributions on the invoice header? If so, should these accounting distributions be available on the device? Not used
Will users want to see attachments for the invoice on the device? Yes

Exercise

The following variations can be done for scenario 1, based on the requirements for scenario 2. Use this section as an exercise that you can complete for learning purposes.

  1. Because more invoice lines are expected in scenario 2, the following changes to the design will help optimize the user experience on the mobile device:

    1. Instead of viewing invoice lines on the details page (as in scenario 1), users can choose to view lines on a separate mobile page.
    2. Because more than one invoice line is expected in this scenario, if the VendMobileInvoiceAllDistributionTree page is used to design the distributions page for mobile (as in scenario 1), it might be confusing for the user to correlate lines to distributions. Therefore, use the VendMobileInvoiceLineDistributionTree page to design the distributions page.
    3. Ideally, the distributions should be shown in the context of an invoice line in this scenario. Therefore, make sure that the user can drill into a line to see the distributions page. Use the page link capability to establish the drill-through, just as you did for the header and details pages in scenario 1.
  2. Because more than one amount type is expected on the distributions in scenario 2 (sales tax, charges, and so on), it will be useful to show the description of the amount type. (We omitted this information in scenario 1.)

Conclusion

The mobile platform and the application capabilities let you design mobile scenarios that are optimized for a user base in an organization. Based on the examples that are provided in this topic, you can try other variations and create different experiences that meet a specific need.