{"id":1248,"date":"2024-06-01T11:40:31","date_gmt":"2024-06-01T11:40:31","guid":{"rendered":"https:\/\/fredborg.org\/?p=1248"},"modified":"2024-06-02T09:48:06","modified_gmt":"2024-06-02T09:48:06","slug":"model-driven-app-using-business-central-and-virtual-tables","status":"publish","type":"post","link":"https:\/\/fredborg.org\/?p=1248","title":{"rendered":"Model-Driven App Using Business Central and Virtual Tables"},"content":{"rendered":"\n

In the previous post Enhancing Business Central with PowerApps – Fredborg<\/a> we looked at how we could connect Business Central to Dataverse, and what kind of Power Apps are available to us.<\/p>\n\n\n\n

In this post, we will develop a straightforward Model-Driven app using virtual tables in Dataverse that interface with Microsoft Dynamics 365 Business Central. This app will be based on a custom module I’ve created in Business Central named “Superhero.” For those interested in the technical details or who wish to follow along, the source code for this project is available on my GitHub page<\/a>. The Superhero module includes several components: tables for superheroes, superhero lines, weapons, and superpowers, as well as the API pages necessary to interact with these tables.<\/p>\n\n\n\n

The first step in our project is to navigate to make.powerapps.com<\/a>. Once there, click on “Tables” and search for the table named “Available Business Central Table.” <\/p>\n\n\n\n

\"\"<\/p>\n\n\n\n

In this table, you will need to mark the following tables as visible: superhero<\/code>, superheroLineBC<\/code>, superPower<\/code>, and weapon<\/code>. Making these tables visible allows them to be accessed within Dataverse.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

A useful tip is to also make the “Refresh” column visible. This field is particularly important because it is used to force Dataverse to fetch the latest updates from your Business Central API pages.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Once you have made the relevant tables visible in Dataverse, you can check to see the data directly from Business Central.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Navigate to the superheroLines<\/code> table in Dataverse to view this data. To examine how your tables are related, click on the “Relationships” button. This displays the relationships between your tables.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I encountered an issue where the powerId<\/code> relationship was not appearing as expected. To resolve this, I had to manually create it. Here’s how you can do it: go to “Columns” in the superheroLines<\/code> table and create a new column named powerId<\/code>. Set this column as a lookup to the superPower<\/code> table. This manual step ensures that the necessary relationship is established, allowing for proper data interaction within your app.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Building the App<\/h3>\n\n\n\n

When constructing a Model-Driven app, there are two main approaches to consider. The first approach involves creating all the views directly within the Power App itself. The second approach, which we will follow, involves doing as much setup work as possible upfront by creating views directly within your Dataverse. This method ensures that whenever someone uses your tables, they are immediately provided with a view that is ready to use. Additionally, this approach helps maintain consistency across all your applications.<\/p>\n\n\n\n

To create our views from inside Dataverse, navigate to the superHeroApi<\/code> table and select “Views.” This allows you to define how data is presented and interacted with across your app, setting a standard view that can be utilized universally.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Once you’re in the “Views” section of the superHeroApi<\/code> table, you’ll see a list of the different standard views available for use. Although you have the option to create a custom view, in this tutorial, we’ll focus on modifying the existing standard views. We’ll start with the one named “All superheroes,” which serves as our primary list view. This view will allow us to display all entries from the superhero table, and we’ll walk through the steps to edit this to better suit our needs.\"\"<\/p>\n\n\n\n

Since we are working with the list view, which is intended for a broader overview, we don\u2019t need to include too much detail. In our case, we will enhance the view by adding only the essential fields: ‘Description’ and ‘Power Rating’. This can be done by clicking the “+ View Column” button and selecting these fields from the list.<\/p>\n\n\n\n

Next, to make the view more descriptive and tailored to our specific setup, I will rename the view from “All superheroes” to “Superhero List”. This renaming helps clarify the purpose of the view and ensures it is easily identifiable within the system.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Next press the Save and publish button.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Next, navigate back to your table in Dataverse and select “Forms.” Here, we will focus on editing the main form used for detailed data entry and review. This form is crucial for capturing and displaying the full range of information about each entry in a user-friendly format. Let\u2019s proceed to make the necessary adjustments to this main form to ensure it meets our application\u2019s requirements.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Using the intuitive drag-and-drop interface, you can easily add and arrange the fields you wish to display on the main form. This flexibility allows you to tailor the form exactly to your application\u2019s needs. Additionally, you have the option to configure the layout by choosing the number of columns for each section. This customization helps in organizing the form in a way that enhances usability and ensures that all necessary information is accessible and clearly presented to the users.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

You may observe a section labeled “Related” at the top of the form. This section displays any table relationships linked to your superhero table. For instance, in my setup, there’s a relationship to the superheroLineBC<\/code> table. To make this clearer and more intuitive for users, I will rename this relationship to “Lines.” This simple renaming helps users quickly understand the nature of the relationship and access the related data more efficiently.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Another effective method to display related tables is by using a subgrid. Here\u2019s how to integrate one into your form:<\/p>\n\n\n\n

    \n
  1. Adjust the Layout:<\/strong> First, set your form layout to display two columns. This split allows for a clearer and more organized presentation of information.<\/li>\n\n\n\n
  2. Rename the Section:<\/strong> Change the name of the new section where you plan to add the subgrid to “Lines.” This name helps users easily identify what the section contains and relates to.<\/li>\n\n\n\n
  3. Add the Subgrid:<\/strong> Place a subgrid in the newly named “Lines” section. Make sure to configure the subgrid settings to specifically show related records.<\/li>\n\n\n\n
  4. Enable Related Records:<\/strong> Ensure you set a checkmark in the “Show related records” option within the subgrid settings. This setting will link the subgrid directly to your related table, such as superheroLineBC<\/code>, displaying all relevant associated data right within the form.<\/li>\n<\/ol>\n\n\n\n

    By following these steps, you enhance the form\u2019s functionality and user experience, making it easy for users to navigate and interact with related data efficiently.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n\n

    Currently, the subgrid may appear quite basic. To improve its aesthetic and usability, you can start by hiding the label, which helps to clean up the interface for a more streamlined look. Next, focus on customizing which view the subgrid displays:<\/p>\n\n\n\n

      \n
    1. Hide the Label:<\/strong> In the subgrid settings, find the option to manage the label and select ‘Hide’. This reduces clutter and draws more focus to the content of the subgrid itself.<\/li>\n\n\n\n
    2. Customize the View:<\/strong> Decide which specific view you want the subgrid to display. You can either create a new view or edit an existing one to better meet your needs. If editing an existing view, navigate to the view settings and make the necessary adjustments to ensure that it showcases the most relevant information in a user-friendly manner.<\/li>\n<\/ol>\n\n\n\n

      These modifications will enhance the visual appeal and functionality of the subgrid, making it a more valuable component of your form.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      <\/p>\n\n\n\n

      Just like with the “Superhero List” view, you can personalize the subgrid to display the columns that are most relevant to your users. Here’s how to do it:<\/p>\n\n\n\n

        \n
      1. Access the View Settings:<\/strong> Navigate to the settings for the view you’ve chosen to display in the subgrid.<\/li>\n\n\n\n
      2. Add Columns:<\/strong> Use the “+ Add Column” button to select and include the fields that you want to appear in the subgrid. This allows you to tailor the displayed information according to the specific needs and priorities of your app.<\/li>\n\n\n\n
      3. Arrange the Columns:<\/strong> After adding the desired columns, you can arrange them in an order that makes the most sense for users to quickly understand and interact with the data.<\/li>\n<\/ol>\n\n\n\n

        By customizing the columns in the subgrid, you ensure that the view is not only informative but also aligned with the overall design and functionality goals of your app.<\/p>\n\n\n\n

        To maintain a cohesive and efficient user experience across your Model-Driven app, it’s important to apply similar customizations to all tables involved. Here\u2019s how to do it:<\/p>\n\n\n\n

          \n
        1. Review Each Table:<\/strong> Go through each table in your Dataverse setup, such as superheroLineBC<\/code>, superPower<\/code>, and weapon<\/code>.<\/li>\n\n\n\n
        2. Customize Views:<\/strong> For each table, adjust the views to ensure they display the most relevant columns and data. This might involve adding new columns, reordering existing ones, or even removing unnecessary columns.<\/li>\n\n\n\n
        3. Modify Forms:<\/strong> Similarly, tailor the forms for each table by adding or rearranging fields, and adjusting layouts to meet your specific requirements. Ensure that each form facilitates an intuitive and productive interaction for the users.<\/li>\n\n\n\n
        4. Ensure Consistency:<\/strong> As you customize each table, keep an eye on maintaining a consistent look and feel throughout the app. This includes similar naming conventions, layout structures, and interaction patterns.<\/li>\n<\/ol>\n\n\n\n

          By methodically customizing the views and forms for all your tables, you not only enhance the individual functionality of each component but also ensure a seamless and harmonious user experience across your entire Model-Driven app.<\/p>\n\n\n\n

          Once you have configured all the necessary views and forms for your tables, the next step is to build the Power App itself. Here\u2019s how you can get started:<\/p>\n\n\n\n

          <\/p>\n\n\n\n

          Before diving into app development, it\u2019s important to organize your components in a structured way. The first step is to create a new solution:<\/p>\n\n\n\n

            \n
          1. Navigate to Solutions:<\/strong> Go to the “Solutions” tab within your PowerApps environment.<\/li>\n\n\n\n
          2. Create a New Solution:<\/strong> Click on the “New Solution” button. This action will prompt you to provide details for your new solution, such as its name, publisher, and version. Fill in these fields to define the context and ownership of the components you will develop.<\/li>\n<\/ol>\n\n\n\n

            Creating a solution is a critical step as it helps manage and package your app\u2019s entities, forms, views, and other components together, making deployment and maintenance easier across different environments.<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            <\/p>\n\n\n\n

            <\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            After initiating the creation of your Model-driven app:<\/p>\n\n\n\n

              \n
            1. Add New Pages:<\/strong> Click on the “New Page” action to start adding pages that will define the core areas of your app.<\/li>\n\n\n\n
            2. Select Dataverse Table Option:<\/strong> When prompted to choose the type of page, select “Dataverse table.” This option is designed to directly integrate and display tables from Dataverse.<\/li>\n\n\n\n
            3. Choose Tables:<\/strong> From the list of available tables, select the “Superhero,” “Super Power,” and “Superhero Weapon” tables. Each of these selections will create a new page in your app that is dedicated to one of the tables, enabling specific functionalities and views related to each aspect of your superhero module.<\/li>\n<\/ol>\n\n\n\n

              By following these steps, you effectively lay out the foundational pages of your app, ensuring that each key component of the superhero data is accessible and interactively managed through the app.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n
              \"\"<\/figure>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Once you’ve added the tables to your Model-driven app, you’ll notice that they automatically appear in the app’s navigation menu. This default behavior occurs because the “Show in Navigation” option was left checked during the table selection process.<\/p>\n\n\n\n

              Reordering the Navigation Menu:<\/strong><\/p>\n\n\n\n

                \n
              • To prioritize how your data is displayed, you may want to adjust the order of the tables in the navigation menu. For example, if you want the ‘Superheroes’ table to appear at the top, simply use the “Move Up” action available in the navigation menu settings. Continue this action until the ‘Superheroes’ table is positioned as desired.<\/li>\n<\/ul>\n\n\n\n

                Checking the Displayed Views and Forms:<\/strong><\/p>\n\n\n\n

                  \n
                • You’ll see that the view displayed in the app corresponds to the one you set up earlier within the Dataverse table. This ensures consistency and familiarity for users who navigate through the app.<\/li>\n\n\n\n
                • Additionally, when accessing the main form of the ‘Superhero’ table, it should reflect the customization you applied earlier. The form layout, fields, and overall design will match the configurations you established, reinforcing a tailored user experience.<\/li>\n<\/ul>\n\n\n\n

                  Finalizing Your Model-driven App:<\/strong><\/p>\n\n\n\n

                    \n
                  • At this point, your Model-driven app is effectively utilizing the virtual tables from Business Central. With the tables added to your navigation menu and the customized views and forms in place, your app is now ready for further testing and eventual deployment.<\/li>\n<\/ul>\n\n\n\n

                    This setup demonstrates how seamlessly Dynamics 365 Business Central integrates with Power Apps, leveraging Dataverse to enhance and extend its capabilities through customized applications.<\/p>\n\n\n\n

                    <\/p>\n\n\n\n

                    \"\"<\/figure>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n

                    <\/p>\n\n\n\n

                    Conclusion<\/strong><\/h2>\n\n\n\n

                    Throughout this post, we’ve explored the integration of custom API pages from Microsoft Dynamics 365 Business Central into Dataverse, demonstrating a streamlined approach to app development. By pre-defining our views and forms directly within Business Central, we’ve laid the groundwork for rapidly creating a Model-Driven app. This method exemplifies the simplicity and power of Model-Driven apps\u2014most of the heavy lifting is done upfront, enabling the creation of a functional app with minimal additional effort.<\/p>\n\n\n\n

                    While today\u2019s tutorial only scratches the surface of what’s possible with Model-Driven apps, it serves as a practical starting point for delving deeper into the capabilities of Power Apps. There\u2019s much more to explore and customize, and this guide should empower you to embark on your journey into the expansive universe of Power Apps with confidence.<\/p>\n\n\n\n

                    By following these steps, you’ve seen firsthand how efficiently and effectively you can harness the integration between Business Central and Power Apps to enhance business processes and improve operational efficiency. Whether you’re a seasoned developer or new to the platform, the tools and techniques discussed here can significantly contribute to your digital transformation initiatives.<\/p>\n\n\n\n

                    \n