Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
Can we use angular 8+ to create custom visulas. I could see links for creating custom visual in React. Similarly can we create a custom visual in angular
Solved! Go to Solution.
Hi @Anonymous,
I haven't personally unpacked this partcular pattern until you asked, as it's just works for me, but having done so (and thanks very much for asking, as it was quite a fun exercise), my understanding is as follows:
Your posted code snippet doesn't include the overloaded React methods, so let's add them from the example so we can round this out:
private static updateCallback: (data: object) => void = null;
public static update(newState: State) {
if(typeof ReactCircleCard.updateCallback === 'function'){
ReactCircleCard.updateCallback(newState);
}
}
public componentWillMount() {
ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); };
}
public componentWillUnmount() {
ReactCircleCard.updateCallback = null;
}
If we think about this in terms of component lifecycle, what's happening here is as follows:
If you want to unpack this further or get an explanation for the rationale, it'll be best to follow up with the team on the previously supplied email and hopefully they can clarify further. Please share if you find anything out 🙂
One thing I have found with using this in the real world is, if you need to add properties to the component State interface that are not part of the visual's update method, it's handy to modify the update function's signature to accept <Partial>State as follows:
public static update(newState: <Partial>State) {
/** function code as before */
}
The alternative is to declare properties that aren't available to be supplied from the visual's update method as optional (with a ?) in the State interface, e.g.:
export interface State {
textLabel: string,
textValue: string,
internalStateValue?: string
}
The latter way adds the overhead of having to check each optional property whenever you need to use it, so I prefer the former as I at least know that my initial state is always going to be correct when the visual instantiates.
Regards,
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi @Anonymous,
I'm more of a React person, so haven't used Angular beyond auditioning it some years back, but as you can install Angular via npm and it uses the latest ES6 imports, you will be able to use it in custom visuals. You would need to ensure that you can fit it into the current visual.ts entry points, but this is basically how custom visuals with React are done and the example you've found is documented:
I suspect you would also need to set up your tsconfig appropriately, and possibly Webpack depending on how you need to bundle your project up.
I've adopted a similar approach with writing visuals for clients that essentially wrap other charting libraries such as Vega, Highcharts and amCharts - while these aren't as fully-featured as React/Angular, you use the visual.ts methods to manage the brokering of data from your model to the rest of your code - here's a shareable example using Vega.
Your best bet might be to contact the team - pbicvsupport@microsoft.com - to see if there are any specific things to consider with this approach for Angular.
Good luck!
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Thats great thanks I will try using react as It has a simpler setup without webpacks and tsconfig. I looked into the titorial and came accross this line of code which I am trying to understand. It would be helpfull if you could explain it
private static updateCallback: (data: object) => void = null;
public static update(newState: State) {
if(typeof ReactCircleCard.updateCallback === 'function'){
ReactCircleCard.updateCallback(newState);
}
}
We have declared updateCallback and checked if it is a function type inside update method. may I know why ?
Hi @Anonymous,
I haven't personally unpacked this partcular pattern until you asked, as it's just works for me, but having done so (and thanks very much for asking, as it was quite a fun exercise), my understanding is as follows:
Your posted code snippet doesn't include the overloaded React methods, so let's add them from the example so we can round this out:
private static updateCallback: (data: object) => void = null;
public static update(newState: State) {
if(typeof ReactCircleCard.updateCallback === 'function'){
ReactCircleCard.updateCallback(newState);
}
}
public componentWillMount() {
ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); };
}
public componentWillUnmount() {
ReactCircleCard.updateCallback = null;
}
If we think about this in terms of component lifecycle, what's happening here is as follows:
If you want to unpack this further or get an explanation for the rationale, it'll be best to follow up with the team on the previously supplied email and hopefully they can clarify further. Please share if you find anything out 🙂
One thing I have found with using this in the real world is, if you need to add properties to the component State interface that are not part of the visual's update method, it's handy to modify the update function's signature to accept <Partial>State as follows:
public static update(newState: <Partial>State) {
/** function code as before */
}
The alternative is to declare properties that aren't available to be supplied from the visual's update method as optional (with a ?) in the State interface, e.g.:
export interface State {
textLabel: string,
textValue: string,
internalStateValue?: string
}
The latter way adds the overhead of having to check each optional property whenever you need to use it, so I prefer the former as I at least know that my initial state is always going to be correct when the visual instantiates.
Regards,
Daniel
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Thanks for the detailed explanation @dm-p . It was nice to know the reason for the updateCallback implementation.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
13 | |
2 | |
2 | |
1 | |
1 |