Creating Custom Apps using App Designer in Dynamics 365

One of the exciting new features introduced as part of Dynamics 365 is the ability to create custom apps using App Designer. In today's blog, we'll show you exactly how to take advantage of this cool enhancement. With that in mind, here are step-by-step instructions for creating a custom app that we'll call TestApp:

Go to Settings -> Application -> My Apps.

App Designer in Dynamics 365

Click the + CREATE APP button in the upper-right corner, as shown below:

App Designer in Dynamics 365

In the "App Designer" pop-up window, enter the details for your desired app. These include the app's Name and Unique Name, which are both required, as well as Description, Icon, and App URL Suffix, which are all optional.

App Designer in Dynamics 365

Once you've added the information in Step 3, click Next to reveal the "Components" window. As you can see in the screenshot below, for our TestApp, the App Designer has the following components:

ARTIFACTS
- Entities
- Dashboards
- Business Process Flows

ENTITY ASSETS
- Forms
- Views
- Charts

App Designer in Dynamics 365

Next, you need to configure the "Site Map." To do this, click on Site Map.

App Designer in Dynamics 365

This will navigate you to the screen shown below, where you will be able to configure the Area, Group, and Subarea.

App Designer in Dynamics 365

Click the Area button, and provide the details, as shown below. Do the same for the Group button and the Subarea button (also shown below).

App Designer in Dynamics 365 App Designer in Dynamics 365 App Designer in Dynamics 365

In this example, we named our Area, "Demo," and added two Subareas, "Accounts" and "Contacts." TestApp now looks like this:

App Designer in Dynamics 365

Next, for each entity, we add the Forms, Views, and Charts, as shown below:

App Designer in Dynamics 365

Click Validate to check for dependencies. This button is displayed in the top-right corner of App Designer.

App Designer in Dynamics 365

If there are any missing dependencies for these entities, they are shown with the orange-colored validation icon along with the total number of dependencies. In our example below, "Forms" has 18 dependencies in the "Account" entity and 15 dependencies in the "Contact" entity.

App Designer in Dynamics 365

The specific dependencies are displayed in the window on the right side of the screen, as shown below. To fix the outstanding dependencies, simply click the Add Dependencies button. Then, click Save and Publish.

App Designer in Dynamics 365

Navigate to TestApp as shown below.

App Designer in Dynamics 365

And here it is, in all its newly-created glory!

App Designer in Dynamics 365

We hope you found this helpful. For more information on creating custom apps, please check out our PO TV WEBCAST: The Beginner's Guide to Power Apps. It's chock-full of useful information. Happy CRM'ing!

The CRM Minute: The PowerObjects Blog Kicks it Up a Notch [VIDEO]

Our PowerObjects blog is probably one of the BEST Dynamics CRM blogs in the community, and in 2016, we gave it an extreme makeover! Featuring a better user experience, related content, and social sharing platforms, the blog is better than ever! Hear from Jonathan and Maria, the dynamic duo behind the redesign in today's The CRM Minute.

[php snippet=45]

Last year alone, our website and blog received 1,967,986 total PowerObjects website page views! That's almost 2 million page hits, for a total of 1,202,090 sessions and 563,538 unique users. Pretty impressive, we know, but what it comes down to is the person reading this now, you. Without you we couldn't have done it! Thank you for appreciating the content we work so hard to put out. Thanks for coming back and keep on reading!

Happy CRM'ing!

Using Expression Blend and Sketchflow to Visualize a Portal Designed for Dynamics CRM

Introduction

Many of the projects here at PowerObjects utilize some form of a web portal to access or update Microsoft Dynamics CRM information. In the past, they have used various forms of design documents to reach consensus with customers regarding the desired feature set of each portal. One of the challenges to this approach is that most of us don't like to read lengthy technical documents, and neither do our customers. This can lead to missing requirements, inaccurate processes and potentially low CRM user adoption. To help alleviate this risk, we have used wireframe documents that give customers a visual representation of what the portal will look like, but they lack interactivity.

On several recent projects, we have begun using the Sketchflow component of Microsoft Blend to solve this dilemma. Sketchflow is just one of several available "mocking" tools that allow you to produce an interactive sketch of your final product. This sketch can be distributed to multiple users and facilitates feedback through Sketchflow's markup features. The following blog is a brief walkthrough of how to build a sample Sketchflow.

Getting Started

Sketchflow is part of Microsoft Expression Blend 4 Ultimate. To create your project:

  1. Open Microsoft Expression Blend 4 and click New Project from the File menu.

    expression blend and sketchflow

  2. Choose WPF Sketchflow Application or Silverlight Sketchflow Application. Expression Blend allows you to use the XAML markup created by Sketchflow in other applications if you wish. For example, if you were using Silverlight for your portal or maybe even a Windows 8 XAML application, this code could be reusable. In our case, we are just using the sketching benefits so choosing WPF is fine.
  3. Sketchflow allows the user to write C# or VB code as one method to add interactivity to the sketch flow (if needed). The default language is C#.
  4. Once you have named your new project, click OK to get started.

Application Layout

Let's take a quick look at the layout of Expression Blend with Sketchflow. The first area of interest is the Toolbox and specifically three sub-groups of controls; containers, text boxes and buttons/combo boxes. Right clicking on these icons will give you a popup submenu of xaml controls that you can use in your sketchflow. Controls with Sketch in their name have a specific "sketch" look and feel as if they were sketched out on an artist canvas or a whiteboard. It is best to use sketch controls because it reminds the user that this sketchflow is not the real application but a mere "sketch" of what the final product will look like.

Toolbox



Screens

In Sketchflow, screens are equivalent to pages in a website or windows in an application. The Sketchflow Map window gives you a graphical representation of the screens contained within your sketchflow. There are two types of screens; connected screens (blue) and component screens (green). Our login screen is a good example of a component screen. The login controls we will build later our imbedded within our home screen. Connected screens are simply screens that are connected to one other to show navigation between pages.

Design Canvas

The Design Canvas is where we drag our controls and design our Sketchflow application. In the first screen screenshot below, there is an exclamation point on our main screen. This markup indicates that the component Login screen does not show because it is empty. In the second screenshot, you can see the added a sketchy button to the design canvas. The design canvas has zoom and view code capabilities as well. If you like to work in code, you can always click the XAML icon "<>" and see your controls representative in the XAML markup (see screenshot)

Properties, Resources and Data

Along the right hand side of the screen are three additional windows; Properties, Resources and Data. The Properties window allows you to edit the individual properties for selected controls. The resources window allows you to edit styles and resource dictionaries. And finally, the Data Window gives you access to create local data entities that can be used to bind sample data to controls. We will discuss the data capabilities later in this post.

Using Sketchy Controls

We will start our sample, but creating the required login controls in our login screen. For this sample, we won't wire up any security, but just use the login component screen to give you an idea of how the component screens work. So let's get started.

  1. When you created your project, you should see one screen name "Screen1". Rename this screen to Home. Double-click the tile of the screen in the Sketchflow Map window and change it to Home
  2. After you have renamed the screen, move your cursor over the word home. You should see a sub menu drop down below the word.

  1. Click the third icon to Create and Insert a Component Screen.
  2. Name the screen "Login"
  3. Double-click just to the left of the header in the new window. This will open the login screen in your design canvas.

  4. In the objects and timeline window, click the Layout Root element.

  5. Clicking on this element will display the control's properties in the properties window. Find the layout group and change the width and height to 400. This will enlarge our canvas and give us room to drag our controls.

  6. Right click the "T" icon in the Toolbox window to display the subgroup of controls. Left click the first control; BasicTextBlock-Sketch. We will use this control for our username label.

  7. With this control selected, move your cursor back to the canvas. Left click on the canvas and drag your new control to the appropriate size. You can always change it later.

  8. After releasing the mouse button, change the text inside to "Username".

  9. Right click the TextBlock icon from the toolbox again and choose the BasicTextBox-Sketch icon. Drag the text box control to the right of the TextBlock control you created in the previous step.
  10. Click the F5 key to run the project. After a few seconds, Blend will open up a new window and display your application in the Sketchflow Player. It should look something like this.

  11. Close the player window and repeat steps 8-12 to create a password TextBlock and TextBox

  12. Right click on the Button in the toolbox and left click the Button-Sketch control. As we did previously, move your mouse back to your design canvas and click and drag the button just below your password text boxes. Change the label button by updating the text in the Common Properties section of the Properties window

  13. Click F5 again to run the application. The viewer is interactive. You can change the text inside of the text boxes and click on the login button. Review your login screen and close the viewer when you are finished.

Navigation

If you are doing a single page portal or application you could simply continue to add fields on this single screen and not bother with navigation. However most portals have several pages, so let's look at how we navigate between pages.

  1. In the Sketchflow Map window, move your mouse over the home page header and click the first icon in the sub menu; Create a Connected Screen. Rename the screen "Accounts" as you did with the login screen. Your screen should look like the following:

  2. Switch back to the login screen by double-clicking the login screen icon or clicking the login screen tab at the top of the design canvas.
  3. Right click the login button and choose Navigate To from the menu and then choose Accounts in the sub menu.

  4. Click F5 to run the application. When the viewer is display, click the login button to navigate to your blank Accounts screen.
  5. Put a Button-Sketch on the accounts screen.
  6. As you did previously, right click and choose navigate. But this time, choose Home. This will allow you to return to the Home from the account screen.

  7. Press F5 again and test the navigation by clicking the Accounts and Home buttons.

Sample Data

Now that we have successfully built a few pages and the navigation, let's add some data and display it on our Accounts screen.

  1. Make sure you have the Accounts screen active in your canvas.
  2. Click the Data tab in the upper right hand corner of the application. Select This Document and click the first icon that looks like a database. From the drop down menu, click New Sample Data

  3. Rename the data source to Accounts and change the Define In attribute to This Document. Click OK.

  4. Expression will seed your data source with a collection and two sample fields; Property 1 and Property 2. Property 1 is a string and Property 2 is a Boolean (yes/no).

  5. Double-click each property and change their name. Rename Property 1 to AccountName and Property 2 to IsCustomer.

  6. Click the icon next to the word Collection that has a database and pencil. This will open the Edit Sample Window. Expression blend creates fake data for you automatically. You can update this data with more appropriate fake data if you choose to. Click OK to close the window.

  7. In Sketchflow, there is no Sketchy data grid. However, we can use the standard XAML datagrid to display data. In the Assets tab, click the Data menu under the Controls ,menu and choose DataGrid. Return to your canvas, click and drag the data control onto your screen. When dragging the control, Expression Blend will give you the dimensions. I would make it approximately 150 pixels high by 400 wide.

  8. Click and drag the Collection object inside the Data tab and place it on top of your data grid.

  9. Expression Blend will tell you it is about to bind the grid to your collection. After you have released the mouse, your data control should look like this.

  10. Click F5 to review the application. Expression Blend allows you to edit the data inline within the data grid. Keep it mind, the updates are not stored anywhere as this is just a mocking tool.

Distributing to Users

Now that we have a basic sample application, let's see how we distribute it to users.

  1. Click the file menu and choose Package Sketchflow Project

  2. When the package process is complete, Expression Blend will open up a Windows Explorer window with the results of the package. To have users review your Sketchflow, send them this folder and have them execute the executable file. In this example, the file is named BlogSample.exe.

  3. The executable runs the same viewer that is used when you run the project from within Express Blend. The user can interact with Sketchflow and add feedback.

  4. Using the feedback window in the lower left hand corner, the user can make annotated notes (graphical and test) regarding their feedback.

  5. After the feedback has been entered, the user can export the feedback and send you the file. Click the drop down icon next to the folder in the upper right hand corner of the feedback window. Save the contents of the file.

  6. To view the feedback in Expression Blend, click the Window menu and click Sketchflow Feedback. This will open the Sketchflow feedback window next to the Objects and Timeline Window. Click the Plus icon and select the feedback from your user. After you have imported in the feedback file, you can show or hide the feedback for each user by clicking on the "Eye" icon. The feedback will be displayed inside the design canvas as shown below. You can import multiple feedback files from users.

Conclusion

Sketchflow is a powerful mocking tool built directly into Expression Blend. Mocking can be a significant time saver and will help your project mitigate potential risk by allowing users to "see" what a system will look like when complete. In this example, we tool a very simplistic portal example and built a few pages to show you what was possible, but we only scratched the surface of what is possible. For more information and several extremely helpful videos on Sketchflow, visit http://msdn.microsoft.com/en-us/expression/cc197141.aspx

Happy CRM'ing!