Create a better version of HTML Text component using PCF components in Power Apps

foreign session it's about how to create a better version of html text component so first of all uh just few words about me I'm Fabio franzini I'm CEO of FB Solutions I'm Microsoft mdp both on office development and business category and of course I'm a developer but I brought code by using a typescript node.js basically on SharePoint framework but I love powerfx I love powerapps to create certain applications so in this slide you can find some a way to contact me like my email my Twitter account LinkedIn and GitHub so the agenda of today it's just an introduction of the default html text component in powerapps canvas and then I want to show you just on a block of uh and a component built on powerapps component framework to create a better version of this uh default html text component I'll show you some demo and and the code of course and then at the end just one slide with some references so this is the default you can see in the slide the image of the default html text component so basically it's used to show static HTML inside your canvas app there are a lot of sample on how to use this component to create some interesting graphical new component just to use HTML but the first problem is that if you want to generate Dynamic HTML you need to generate the string Inside powerfx by using for example the concatenation strings and then you have to pass the string at this component and some problems like uh the performance because you need to calculate the string or for example if you want to create complex Graphics you need to use the Styles property for the every HTML elements and then it's not simple to create complex Graphics by using just the Styles attribute so it's used to create not only to show html text but to create custom new custom component by using HTML but have some problems for example it this this control not support the internal state for example if you want to create a dynamic control you are not able to manage the internal State and it's not implemented the interactivity like uh custom events and so on so this is the reason why I tried to create just an Epoch of a PCF component named HTML template component so this components support the creation of dynamic HTML by using two different properties the HTML template property and the Json data use internally use the Microsoft graph toolkit templating engine to take of course the HTML template and apply the Json data and Implement some interesting stuff like the internal state the possibility to write custom styles using the syntax of the tilewin CSS the talwin CSS later I'll show you uh instead of the the official website the syntax is just a set of CSS class name that you can use to apply some Styles at the HTML elements and of course with this component you are able to handle custom events by using the standard on change Behavior property and two different properties the event type and event data to pass to the from the component to the the canvas app which custom event you want to invoke and the data that you want to pass so basically it's a component that allows you to create new contents so component with behaviors and internal State not only to show HTML static HTML so dislike it's an representation of an example of a HTML template that you can pass to to this component and first of all you are able to see uh into the class attributes some strings and these strings is uh the class names that come from the talwin CSS to apply different styles but inside these uh anchor element for for example you're able to see the data dash for example four or props and these two attributes come from the syntax of the Microsoft graph toolkit so inside this component I don't use the Microsoft graph toolkit but just the engine to apply the template and for example you're able to see that here you can attach to the click of the anchor some functions and then pass some parameters and then we have the the syntax to to bind the the text that you want to the value that you want to to show us a text inside the uh the the result and again the data Dash is if you want to show or hide some elements based on for example director of this get State function I Implement inside this component some function that it's used by the the template engine to manage the state of the component and uh for example to invoke custom event so first of all we are able to see here the set State function uh this set State use two parameters the state name and state value and it's used to set the internal state if you need to manage the internal state of the component and then we have another one function uh name it get State uh that accept just one uh parameter state name to retrieve of course the internal State another one for toggle state to toggle the specific state name by the way with another value basically it's used for example for Boolean Barrett to set the true or false and the last one is the invoke event function yeah you can use to invoke uh to emit a custom event and then manage inside the canvas app by using on change Behavior property so it's time to the demo first of all I want to show you this is my test environment for the powerapps component framework and this is the the component you are able to see that I'm able here to write some HTML element and then this HTML it's a rendered inside the component but for example if I take some of more complex like for example the success message I'm able to see that I'm able to render more beautiful HTML directly inside this component so this HTML it's created by using again tilewind CSS and tilewin CSS it's an open source framework CSS framework that Implement a lot of CSS class name already available and then you need just to use specific class name to create the complex Graphics inside your HTML okay uh more complex example could be for example this one timeline I put this HTML inside string inside my component and my component render again a beautiful UI using HTML and tilewind CSS why I use tilewind just because it's more simple to decorate the HTML to apply Uh custom Styles then use directly the style attribute for example and the last one that I want to show you come on just one moment it's the complex one because the this previous sample render only the static HTML but I want now to show you the possibility to use Dynamic HTML by using some Json value I copy and paste the just on a Json value and I want to show you this portion of HTML that use again talwin and the the Microsoft graph toolkit template syntax to generate dynamically at runtime so I put this one inside the property and this is the example so this example it's uh represent for example on a dashboard and this data come from the Json barrier that I passed to the Json data property the good part is if I try to click inside on a specific div this HTML it's uh completely Dynamic and then I'm able to show an another div and inside this another div of course it's dynamically and then if I click different box the value change if I click again I'm able to hide because uh inside here I use the toggle function inside the template and then the good part is if I click on the value inside this div okay I have two output properties sorry the event type details click and the event data that contain the value that I passed this function so if I click here for example or here and I click the total subscribers I'm able to show here the total subscriber value this means that if I go inside on a canvas app demo that use of course this control okay and then click on start I'm able to see that if I click its work of course and if I click on the level here I'm able to show here inside two labels inside the the canvas app the name of the event the value that I passed the event and I'm able to manage the on change property to interact with the with an event to the canvas app for example these two labels take the value from the event data and given type from this HTML template component but if I navigate here inside the on change event I'm able to use for example the notify to notify some value or if I want to implement by using the HTML template and Json data for example on a navigation bar I'm able to read the events data and the event type and then for example when I click on specific item inside the my HTML navigate to another screen inside the same application so I don't have too much time but I want to show you the implementation of this component so basically it's a powerapps component framework by using of course typescript as a language much to create this component and have four different type of properties the HTML template which is on data event type and data this event type and even data it's to how to put parameters and then inside the implementation we have inside the unit the initialization of the control we created the template context for the template engine of the max graph toolkit to have the set State get State toggle State and invoke event and then I use a library viewing that it's uh the browser and run time implant implementation for uh television CSS just to generate analyze the HTML and generate the style based on the class name present inside the HTML string inside the update View we have just the logic to take a plate view it's uh call it every time that the property of the controller changed and then I take the basically the HTML template and I passed the template helper that comes from the Microsoft graph toolkit to render on a specific template inside on a specific element of of course the container of my control and then I pass the data context that come from the Json data and the template context and at the end we have of course a get output that return the two output properties and the magic is inside the template context because we have the possibility to set the the controls to update view or notify output changes okay I think that's all for me this is the reference I want to show you for the this this control just the the reference for the HTML text control the full control for canvas app how to create components by using the powerapps component framework and how to customize so how to use the template of the Microsoft graph toolkit to implement the template for this control and just an introduction of the TV in the library to implement the tile wind CSS inside your HTML template thank you thank you thank you Bobby a really really cool stuff I included those links there into the chat for everyone as well so they can reference them [Music]

Channel: Microsoft 365 & Power Platform Community

Views: 4,642

Keywords: SharePoint, PnP, Dev, community, open-source, Microsoft, Teams, Power Apps, Power Platform

Id: wcNN82AWz-4

Length: 14min 24sec (864 seconds)

Published: Wed Nov 09 2022