poweruser-ethan.hashnode.dev
Open in
urlscan Pro
76.76.21.164
Public Scan
Submitted URL: http://poweruser-ethan.hashnode.dev/advanced-rich-text-capabilities-in-canvas-app-to-dataverse-beyond-limits
Effective URL: https://poweruser-ethan.hashnode.dev/advanced-rich-text-capabilities-in-canvas-app-to-dataverse-beyond-limits
Submission: On February 02 via manual from MY — Scanned from DE
Effective URL: https://poweruser-ethan.hashnode.dev/advanced-rich-text-capabilities-in-canvas-app-to-dataverse-beyond-limits
Submission: On February 02 via manual from MY — Scanned from DE
Form analysis
0 forms found in the DOMText Content
EMPIRICAL ETHAN Follow EMPIRICAL ETHAN Follow ADVANCED RICH TEXT CAPABILITIES IN CANVAS APP TO DATAVERSE - BEYOND LIMITS Ethan Rebello ·Jun 25, 2023· 5 min read Play this article Your browser does not support the audio element.SPEED1X TABLE OF CONTENTS * Introduction * Sample Scenario * Implementation Steps * Getting Data * Using HTML Control to Display a Table * Leverage this Table in your Dataverse Record * Method 1: Overwrite Data * Method 2: Insert or Append Data * Output * Key Points to Note * Summary * Reference Materials Show more PERMALINKINTRODUCTION Welcome, everyone! In this blog, we'll look at the Rich Text Experience features in both Dataverse and Canvas Apps. While these controls have some limits, we'll push the limits by using HTML to enhance your Rich Text experience in both applications. Let's explore the exciting possibilities by leveraging HTML control and enhance your Rich Text experience -------------------------------------------------------------------------------- PERMALINKSAMPLE SCENARIO For this scenario, I'll consider a sample project that is in the scoping phase where necessary details are captured. To enhance further, Rich Text controls are used to display detailed and structured layouts. Rich Text Components/Control/Editors do exist in Dataverse as well as Canvas Application. Both work great up to a certain extent until users want to add Tables for example. In Dataverse, we do have the option to add Tables but we don't have the same in Rich Text Editor for canvas Applications. Canvas App - Rich Text Control allowed formats and limitations Model-Driven App - Rich Text Control Details Let's try to add a detailed Table layout in Canvas Application that we can use in Dataverse -------------------------------------------------------------------------------- PERMALINKIMPLEMENTATION STEPS For this blog, we will be utilizing collections to display our HTML content. Also, I used ChatGPT to quickly generate sample record data. PERMALINKGETTING DATA Step 1: I am using a collection that will be leveraged in HTML Table. I have a collection that has 3 columns: 1. Section - Determines which section the data should go 2. Field - Determines fields in that section 3. Value - Determines values for the respective field Click here to see the Collection Code ClearCollect( colScopingData, { Section: "Project Overview", Field: "Project Name", Value: "Acme Project X" }, { Section: "Project Overview", Field: "Project Manager", Value: "John Smith" }, { Section: "Project Overview", Field: "Start Date", Value: "January 1, 20XX" }, { Section: "Project Overview", Field: "End Date", Value: "June 30, 20XX" }, { Section: "Scoping Process", Field: "Scope Definition", Value: "Identifying project objectives and deliverables" }, { Section: "Scoping Process", Field: "Stakeholder Analysis", Value: "Assessing key stakeholders and their requirements" }, { Section: "Scoping Process", Field: "Requirements Gathering", Value: "Collecting and documenting project requirements" }, { Section: "Scoping Process", Field: "Scope Documentation", Value: "Creating a comprehensive scope statement" }, { Section: "Scope Boundaries", Field: "In-Scope Items", Value: "Defined project deliverables and objectives" }, { Section: "Scope Boundaries", Field: "Out-of-Scope Items", Value: "Exclusions and limitations for the project" }, { Section: "Scope Boundaries", Field: "Scope Change Management", Value: "Process for handling scope changes" }, { Section: "Scope Verification and Acceptance", Field: "Validation Process", Value: "Ensuring project deliverables meet defined scope" }, { Section: "Scope Verification and Acceptance", Field: "Stakeholder Approval", Value: "Obtaining sign-off on the scope from stakeholders" }, { Section: "Scope Verification and Acceptance", Field: "Scope Acceptance Criteria", Value: "Criteria for determining successful scope completion" } ) PERMALINKUSING HTML CONTROL TO DISPLAY A TABLE Do check out my blog on how to leverage simple HTML Tables using Collection - Blog Link Step 2: Add HTML control in your Canvas App. Following Properties for the HTML control: 1. Items - Copy Copy "<table width='100%' style='border: 1px solid black; border-collapse: collapse;'>" & "<tr><td colspan='2' style='border-bottom: 1px solid black; padding: 5px; width: 30%;'><b>Project Overview</b></td></tr>" & Concat( Filter( colScopingData, Section = "Project Overview" ), "<tr><td style='padding: 5px; width: 30%;'>" & Field & "</td><td style='padding: 5px;'>" & Value & "</td></tr>" ) & "<tr><td colspan='2' style='border-top: 1px solid black; border-bottom: 1px solid black; padding: 5px; width: 30%;'><b>Scoping Process</b></td></tr>" & Concat( Filter( colScopingData, Section = "Scoping Process" ), "<tr><td style='padding: 5px; width: 30%;'>" & Field & "</td><td style='padding: 5px;'>" & Value & "</td></tr>" ) & "<tr><td colspan='2' style='border-top: 1px solid black; border-bottom: 1px solid black; padding: 5px; width: 30%;'><b>Scope Boundaries</b></td></tr>" & Concat( Filter( colScopingData, Section = "Scope Boundaries" ), "<tr><td style='padding: 5px; width: 30%;'>" & Field & "</td><td style='padding: 5px;'>" & Value & "</td></tr>" ) & "<tr><td colspan='2' style='border-bottom: 1px solid black; padding: 5px; width: 30%;'><b>Scope Verification and Acceptance</b></td></tr>" & Concat( Filter( colScopingData, Section = "Scope Verification and Acceptance" ), "<tr><td style='padding: 5px; width: 30%;'>" & Field & "</td><td style='padding: 5px;'>" & Value & "</td></tr>" ) & "</table>" 1. AutoHeight (optional) - True This is how it will look like: (Note at the end about Character Count) PERMALINKLEVERAGE THIS TABLE IN YOUR DATAVERSE RECORD Step 3: I'll be showing you 2 possible ways of pushing the data to your Dataverse Record. PERMALINKMETHOD 1: OVERWRITE DATA Here, you can directly patch the record to your Column where Rich Text is supported. You can patch the Column as follows: Copy Copy Patch( <datasource>, <record>, { 'Detailed Information': HTMLControl.HtmlText } ) PERMALINKMETHOD 2: INSERT OR APPEND DATA You can append your Text by using concatenate function to join previous data and your HTML data just like 1. Append Copy Copy With( { RecordData: LookUp(<datasource>, <record>, ThisRecord) }, Patch ( <datasource>, <record>, { 'Detailed Information': Concatenate(RecordData.'Detailed Information', HTMLControl.HtmlText) } ) ) 2. Insert to a specific location We will use a substitute to insert the HTML data. I used "#TABLE#" as a identifier where data needs to be added Copy Copy With( { RecordData: LookUp(<datasource>, <record>, ThisRecord) }, Patch ( <datasource>, <record>, { 'Detailed Information': Substitute(RecordData.'Detailed Information', "#TABLE#", HTMLControl.HtmlText) } ) ) -------------------------------------------------------------------------------- PERMALINKOUTPUT As you see, you get the full experience of using Tabular data in Dataverse. -------------------------------------------------------------------------------- PERMALINKKEY POINTS TO NOTE 1. Always keep the character count in your mind as the column in Dataverse has limits, keep a counter or visual cue for the user to see when the HTML data crosses the limit. 2. Use Custom CSS Styling to make the experience better as advanced styling is not possible on both platforms but using HTML control, you can deploy rich layouts + charts + icons and more 3. DO NOT USE div containers with box shadows in your HTML control which will be patched in dataverse, this will repeat the div for every line user enters and create issues in your experience. So keep it simple. 4. Your Rich Text Editor won't show you the HTML Layout as per limitation but this doesn't mean the formatting is gone. -------------------------------------------------------------------------------- PERMALINKSUMMARY That's it! I hope you found this article useful, and I encourage you to experiment with HTML control and enhance your Rich Text experience to meet your specific needs. PERMALINKREFERENCE MATERIALS 1. My Blog to Convert Collection to HTML Table - Create HTML Table from Collections in Canvas PowerApps 2. Concatenate formula - Microsoft Documentation 3. Substitute function - Microsoft Documentation 4. PowerApps Community SUBSCRIBE TO MY NEWSLETTER Read articles from Empirical Ethan directly inside your inbox. Subscribe to the newsletter, and don't miss out. Subscribe powerappsCanvas PowerAppsCommunityRocksPowerPlatformPower Platform WRITTEN BY ETHAN REBELLO Follow Share this Article Series THE EXPLORATION: MASTERING POWER PLATFORM 1 SORTING GALLERY ITEMS USING CHECKBOXES: AN EXAMPLE OF A SIMPLE TO-DO LIST Introduction Welcome, everyone! In this blog, I'll explain how to sort your records in Gallery based… 2 ADVANCED RICH TEXT CAPABILITIES IN CANVAS APP TO DATAVERSE - BEYOND LIMITS Introduction Welcome, everyone! In this blog, we'll look at the Rich Text Experience features in bot… 3 TIP: CREATE HTML TABLE FROM COLLECTIONS IN CANVAS POWERAPPS Introduction Hello, PowerApps enthusiasts! In this article, I'll be sharing how you can create a dyn… 4 TIP: ENHANCED READING CONTROL IN THE CANVAS APP WITHOUT THE USE OF FLEXIBLE HEIGHT LABELS OR GALLERI… Introduction Hello, PowerApps enthusiasts! Finding an effective method for displaying lengthy text i… 5 CREATE NESTED COLLAPSIBLE GALLERY EXPERIENCE IN CANVAS POWERAPPS Introduction Let's dive into the benefits of the nested collapsible gallery control in Canvas PowerA… ©2024 Empirical Ethan Archive·Privacy policy·Terms Publish with Hashnode Powered by Hashnode - Home for tech writers and readers