Implementation of Customer's Dashboards and Graphs.

[Anonymous]

Hi,

I am a beginner in PowerApps and having a task to build a dashboard that shows a number of tabs and each tab contains multiple graphs (i.e. Chart JS).

Task Requirments:

I need to build a form that shows a dashboard once the user clicks on the Person entity record from D365 CRM a form will be opened and it will show a number of tabs and graphs inside it. Please refer to the attached dashboard sample, when the user clicks on different tab UI will be updated accordingly.

Currently, I built a PCF component by using Chart JS with static data and put it at an Entity and Field level. However, in both cases, we required a field or dataset to be mapped while in my case the data will be fetched from another API based on the selected record of a Person entity but if we go to the field level component then I have to create a separate solution for each graph and cannot combine the multiple graphs in the same field control also I don't need to map a field since I am getting data from API. Moreover, if I go to the entity level (i.e. Dataset level) it will not allow me to show the graphs in form.

Questions & Concerns:

• What are the best ways to get my work done?
• Is there any other template type if we want to show the static data instead of a field or dataset bindings?
• How to combine the multiple components together and share the resources (like CSS, JSON, and so on)?
• Is there any UI restrictions for PCF components, since fields have a limited size?
• How to combine the multiple components in a single solution?
• How to call external APIs to get data without having any cross-domain failures?

I really appreciate getting the Ideas and suggestions to implement the task. You may freely contact me to get more details.

[ben-thompson]

• What are the best ways to get my work done?
  For it to work sensible it needs to be a single PCF control - you will need to combine absolutely everything into it.
  
  
• Is there any other template type if we want to show the static data instead of a field or dataset bindings?
  No - field and dataset are the only options at the moment.
  
  
• How to combine the multiple components together and share the resources (like CSS, JSON, and so on)
  With care
  
  
• Is there any UI restrictions for PCF components, since fields have a limited size?
  There is a limit on the size of text that can be passed into the control from the settings screen.
  
• How to combine the multiple components in a single solution?
  You can't - as mentioned above you will need to create everything in a single control
  
  
• How to call external APIs to get data without having any cross-domain failures?
  Your options are to get all the systems correctly configured or create actions within D365 to act as proxy servers to retrieve the information.

Personally I would be  looking at doing this in PowerBI and follow what Rory Neary is doing https://www.linkedin.com/posts/roryneary_power-platform-ugcPost-6611908752784269312-Yk_n as that is an appropriate place with existing tools to display the data you just need to work out how to pass in the appropriate person record details to initiate the filtering. 

While you probably could do what you want to do within PCF I suspect you are looking at a lot of work.

[HemantG · Accepted solution]

You can create a dedicated tab for the control and hence claim all the form space. You dont need configuration as the field type is just used for the dummy binding. 

For tabs one option is to use the form tabs and rely on UCI for tabbed experience and use multiple controls to create individual tabs. Solution can have multiple PCF controls and you can add them using CLI add-reference command. If the tabs are desired within the control you would need to have everything wrapped in one control. You can reuse the CSS and other resources in this case otherwise they need to be separately copied and packaged as part of individual controls. 

For CORS, it is the legitimate policy enforced by the server being called which ideally should enabled calls fr Dynamics domain. Using server plugins or having data consolidated in CDS via sync job is another option. You can use cors anywhere for quick development and validation of the control. 

OOB dashbords can have grids which you can use to dummy bind the charts you need if that experience works for you. 

Hemant 

[Anonymous]

I have seen there are different ways to create power-apps controls, Canvas App, Model-Driven Apps, and PCF Component Framework. Can you please let me know their differences and what kind of approach is more feasible/suitable for me to get my task done.

[Anonymous]

Thanks Hemant, I have seen there are different ways to create power-apps controls, Canvas App, Model-Driven Apps, and PCF Component Framework. Can you please let me know their differences and what kind of approach is more feasible/suitable for me to get my task done.

[AndrewLyMVP]

---

@Anonymous wrote:

Thanks Hemant, I have seen there are different ways to create power-apps controls, Canvas App, Model-Driven Apps, and PCF Component Framework. Can you please let me know their differences and what kind of approach is more feasible/suitable for me to get my task done.

---

Omairzia, Canvas App and Model-Driven Apps refer to two ways to design complete apps (forms/views/pages/etc).  PCF refers to the components/controls you develop that can be embedded into Canvas and Model Driven apps.  They're two separate things.  Hope that clarifies things.

[HemantG]

Thanks Andrew. OOB controls and components are the first one which should be evaluated for the scenario fit and custom code development should be the resort only to build highly tailored experiences which are missing (or are overly complex with expressions and controls).

Going forward PCF and canvas components will be more streamlined so that the maker can use them in same manner as they utilize same fundamental constructs for compositing and packaging.

Also some of the capabilities are under progress at the app level so that the model and canvas difference is lesser.

Hemant