Understanding the App Designer interface and adding components to the app

Now that we understand the app properties from the last section, it is time to configure our first Dynamics 365 app using the Dynamics 365 App Designer, and also understand the interface. The following steps can be taken to create a Dynamics 365 app:

1. Navigate to Settings | My Apps as shown in the following screenshot:

1. On the My Apps screen, you will be able to see a list of already configured apps out of the box, or any other custom apps already configured in your organization:

1. On the My Apps screen, select the Create New App button, available at the top right of the screen, as shown in the following screenshot:

Alternatively, you can also select the Create New App tile, available at the bottom of the My Apps screen, under the Apps Being Edited option on the screen:

1. The next screen will show the App Designer screen with all the app properties that we described in the last section:

1. Choose a meaningful name for the app. In our case, we are creating an app for quickly doing Lead Generation so we will call the app Lead Generation. Notice that Unique Name, App URL Suffix, and Web URL properties are automatically generated:

1. Supply a meaningful description of the app (the URL should be unique):

Also, we are going to keep the Client type as Web (classic CRM web interface).

1. In order to pick a different icon for the app, uncheck the checkbox for Use Default Image, and then select a web resource you want to utilize as an Icon for the app:

We are going to select Legacy CRM icon for this particular app. Notice that on selecting the icon, under the App Tile preview towards the right, you can see the preview of the App Tile:

1. Optionally, you may choose to using the existing Solution to create the app and also choose a Welcome page for the app. We will skip the settings for our first Dynamics 365 app and click Done, available at the top right of the App Designer screen:

1. After clicking Done, the App Designer will navigate to the screen to select the different components.

An app can consist of two distinct types of components, as described in the following table:

Let's now understand the layout of the App Designer. The App Designer is split into two distinct areas:

• Canvas: Toward the left-hand side of the App Designer, you are presented with a canvas area where you can add app components. The following screenshot gives a sample of the canvas area:

• Component properties: Toward the right-hand side of the App Designer, you are presented with an area where you can select the various components and their properties. The following screenshot gives a sample of Components and its Properties area:

Notice here that the classification of different components is also mentioned in the Components area, where the components are grouped into two distinct categories,  ARTIFACTS and ENTITY ASSETS. On the canvas in the App Designer, if you select Dashboards or Business Process Flow, all the entities under Dashboards or Business Process Flow are automatically selected by the App Designer. Then, you just need to select the appropriate entity asset under Entities, such as View, Form, and Chart.

In our case for our Lead Generation app, as no Site Map was selected, Configuration Missing will be shown in the Site Map area:

1. On clicking the arrow icon, on the Site Map area in the canvas area of the App Designer, you will be presented with the Site Map Designer. The Site Map Designer is discussed at length in Chapter 1, Customize Application Navigation, as per the following screenshot:

Hit Save And Close on the following Sitemap editor screen.

Note: For details of Sitemap and Sitemap Designer, please refer to Chapter 1, Customize Application Navigation.

1. Notice that the Lead entity, which was part of the selected site map, is already available in Entity View on the App Designer. Similarly, all the components on the selected site map are automatically available on the App Designer:

1. Selecting ENTITY ASSETS by default, all Forms and Views for the selected entity are available under Entity View. Let's change Views. Click on All next to Views selection and choose the views that you wish to use in this app. Here, only the All Leads and Closed Leads views are selected:

You may also provide a similar selection of Forms and Charts and click Save on the top right of the screen.

1. Next, let's look at the artifacts side of the screen. Here, you can see that Site Map, Dashboards and Business Process Flows are provided and All is selected by default:

1. We can select the Business Process Flow tile and click on the Area which says All. After doing so, we are presented with the option to select the appropriate Business Process Flow available in the current app. As this is the Lead Generation app, we only select Lead to Opportunity Sales Business Process Flow, which is available in out-of-the-box Dynamics 365:

1. As soon as you select a particular Business Process Flow, all the entities under it are automatically selected by the App Designer:

1. Next click Save. Then click Validate, available in the top-right corner of the App Designer:

1. After Validate, you might occasionally receive warnings or errors, as shown here:

1. In our case, these are just potential warnings. So, we can skip them; error warnings cannot be skipped through, however. We can publish our app by clicking Publish. This will successfully publish the app: