Export Gallery Data to Excel in 1sec | Power Apps | Canvas App | Code Component

Summary

In this engaging tutorial from Last Minute Coders, viewers learn how to effortlessly export gallery data from a Power Apps canvas app into Excel in just a second. The video breaks down the process of configuring code components and utilizing them to enhance app functionality, allowing for efficient data export without the delay typically experienced with Power Automate. With clear explanations and step-by-step guidance, this video empowers developers to streamline their Power Apps outputs, ensuring quick and reliable data exports.

Highlights

• Explore how to turn gallery data into Excel without delays. 🌟
• Step-by-step guide to using code components in Power Apps. 📚
• How to enable code components and integrate them seamlessly. 🔌
• Simple JSON tricks to ensure smooth data exports. 🧩
• Upgrade your app's data handling efficiency with this guide! 🔄

Key Takeaways

• Export gallery data to Excel quickly using code components. 🚀
• Avoid time-consuming Power Automate flows for large data. ⏳
• Learn to configure external code components in Power Apps. 🛠️
• Understanding JSON basics for data manipulation. 📊
• Transforming Power Apps for efficient data handling! ⚙️

Overview

In this insightful video by Last Minute Coders, the focus is on making data exports from Power Apps as efficient as possible. Traditionally, using Power Automate to export gallery data could become cumbersome due to its processing time, especially with large datasets. The tutorial introduces external code components that integrate with Power Apps, allowing data to be exported to Excel swiftly and efficiently, elevating the app's performance.

The tutorial walks viewers through enabling and configuring these external components, highlighting the necessity to have administrative privileges. Once set up, the flexibility of these components is demonstrated through a practical application where JSON is used to format data correctly for seamless exports. The process is carefully broken down, making it accessible even for users new to Power Apps.

Key insights include the importance of JSON in data handling and tips on troubleshooting common issues. The video is a perfect guide for developers looking to enhance their Power Apps with quick-export capabilities, reducing reliance on slower traditional methods. It's an empowering resource for improving app functionality and user satisfaction, ensuring data is handled with precision and speed.

Chapters

• 00:00 - 00:30: Introduction The introduction begins with a welcome greeting to the audience of 'Last Minute Coders.' It references the content of a previous video that demonstrated filtering data in a gallery and creating dynamic galleries. The host urges viewers to watch the previous video for a better understanding, providing a direct link and an information button for easy access. The chapter concludes with an example of filtering data by region, emphasizing the practical application discussed earlier.
• 00:30 - 01:00: Using Power Automate for Export This chapter focuses on using Power Automate to export data. The gallery mentioned is dynamic, adjusting its display based on selections made, such as the 'West' option to filter data. A reset button is available to revert to the full dataset. The video will guide through exporting this gallery data into a local Excel file using various methods.
• 01:00 - 02:00: Using Code Components for Fast Export The chapter discusses various methods to expedite data export processes, specifically addressing the limitations of using power automate text flow, particularly when dealing with large galleries with multiple conditions. It emphasizes the need for faster solutions that clients often desire, like immediate exports triggered by a single click. The use of external code components is presented as a solution to achieve such efficiency, implying a need for understanding these components for optimizing export speed.
• 02:00 - 03:00: Enabling Code Component in Power Apps Code components in Power Apps are external elements created by developers that can be integrated into canvas apps for enhanced functionality. The chapter discusses utilizing a specific code component named 'BTD export XL1' in applications.
• 03:00 - 05:00: Importing Code Component The chapter titled 'Importing Code Component' discusses the process of exporting an unmanaged component to be used locally. It advises against exporting multiple components, recommending focusing on a single one to avoid complications. Instructions are given on how the export should look once completed, and there is a reminder to not export it immediately, but rather keep it in its current state. Lastly, the user is guided to navigate to their home screen for further actions.
• 05:00 - 08:30: Implementation in Canvas App This chapter provides a guide on enabling code components in a Canvas App. It begins with accessing the settings and navigating to the admin center. It notes the necessity of having a system administrator role to proceed with enabling the code components, as they are turned off by default. Once in the admin center, users need to select the environment for implementation.
• 08:30 - 12:00: Testing the Export Functionality This chapter provides instructions on enabling specific features within a settings interface to facilitate better functionality. Firstly, navigate to 'settings,' then proceed to 'product and features.' Within this section, there is an option to enable the 'Power App Component Framework' for canvas applications. To do this, locate the toggle for 'allow publishing of canvas apps with code component' and switch it to 'on.' Initially, this feature may be turned off; simply activate it to complete the process. After enabling, close the settings window to finish the setup.
• 12:00 - 13:00: Conclusion This chapter, titled 'Conclusion,' provides a brief guide on setting up a database table for a solution interface. It highlights that first-time users need to create this table. The process is described as straightforward, with default solutions automatically included in the table. Users have the option to import additional solutions as needed.

Export Gallery Data to Excel in 1sec | Power Apps | Canvas App | Code Component Transcription

• 00:00 - 00:30 hi everyone welcome to last minute coders in last video we saw how to filter the data of the gallery and we also saw how we can make Dynamic galleries so if you haven't checked out that video the link is in the description and you might be seeing information button on the top left or the right corner you can click on that and check out that video if you want and it was something like this if I select e so I'll see only east region data okay like you can see a pair
• 00:30 - 01:00 and this Gallery is also Dynamic if I'm selecting West then I'll see best data and here you can see the count also and if I again click on this reset button so I can so here I can again see all the data so it was like this in this video we are going to export our gallery data to a local Excel okay so to do this there are like multiple
• 01:00 - 01:30 ways the first way could be like to use power automate text of flow which is a good way but again it takes a lot of time if if your gallery is way too big and has like condition so it takes it takes a bit of time so sometimes what like clients want they want like just a click of button and it should export within within a second so for that we can use external code components so if you don't know code
• 01:30 - 02:00 components you can check uh you can Google them out but basically what code components are they are the external uh component of the code which are written by some developer and we for this power for canvas app and we can use those external component in in our application and utilize them so for this we will use uh this person yes yes code component this BTD export XL1
• 02:00 - 02:30 just export this one unmanaged one once you will like export this it will look something like like this in your local system okay just do not export this just keep it like this only okay then go to your go to your home screen this home screen
• 02:30 - 03:00 tab and then click on this settings button here and then go to admin Center once you will go up here what you need to do is you need we have to enable the code component so that we can use them in our canvas app because by default it is turned off okay and to go to admin Center you need to be like you need to have system administrator role okay so better to have system administrator role select the environment and then go to
• 03:00 - 03:30 settings once you go to setting go to product and then features once you are inside this screen just enable this feature power app component framework for canvas app here you see allow publishing of canvas have with code component just allow this click on initially it will be turned off just click uh turn it on okay once you turned it on your work is done here just close this now go to
• 03:30 - 04:00 this screen go to solution if you are using for the first time the solution thing then you need to create a database table for this Sim it was very it is very simple it's a simple step just create the data was table for the solutions once you will create by default there will be some some Solutions will be there in in their tables either you can import the those or you can you you will have the option
• 04:00 - 04:30 to import these or ignore these so I have imported so I am seeing these extra and once you once this has been created for you just click on import solution browse that zip file that you just downloaded okay open this yes very simple step do next click on import once you will import this it will it will look something like this right uh once it get added to the solutions so
• 04:30 - 05:00 now we can use this code component in our canvas app now go to your app okay uh go to this plus insert icon button here on the left side corner insert then go to get more component here you see canvas and code go to code now here you will be able to see this Excel export once you like click on this and click on import
• 05:00 - 05:30 this here in your app you are going to see something like this code components and just double click on this and here as you can see up here I can I have already done this see this Excel export one so I've already imported uh I've already added this component in my app so here you can see and it you can check out its property you can change its background color here I have taken green initially it is like
• 05:30 - 06:00 purple I believe uh the height I have taken a dynamic height of this whatever the height of my head and I have taken that height and the height of it it contains two height uh even I don't know why it contains two height like the height of one is the height of the button and one is the height of the maybe this clickable area so for both of them I have
• 06:00 - 06:30 have dynamically written something like this is 0.9 I have done and this is one I have done something like this once once you will do this uh this is its main property data to export which will export our data to our data in in excels from this power app so basically what it takes as input it takes Json so if you guys don't know Json uh you can simply go to w3school and or take
• 06:30 - 07:00 some some example from there but it is let's say very simple we have to put a square bracket inside a square bracket we have to create inside curly bracket then this is the header name is location name is these these will be our header and this is our first row winner 23 there is 21 Delhi so these are our first row second row and so on so forth so to understand this and it is it is very simple
• 07:00 - 07:30 okay once you will come up here in here let me add some text input field so that you will get better idea let me make it as multi-line okay I have taken just this small small example let me copy this uh in this default let me paste it here so if if I'll increase the size of my screen so you can see
• 07:30 - 08:00 square bracket right curly bracket double quote ID double quote then colon double quote one then double quote close then cultivate it close square bracket close okay so once you have done this now if you will click on this export to excel button it will it will export a result so you can open this Excel and you can see id1 is coming up okay let me also show you this example and so
• 08:00 - 08:30 let me just copy this one quickly let's go to our app here firstly let me show you how the text should look like so all the text should come inside double quotes right okay wait wait wait wait wait double quotes let me put the code inside this you can see there is there is error the error is because see if if I put something like even if I
• 08:30 - 09:00 put ampersand okay okay let's not waste our time in this one just wherever there is single double quote right just make make them two okay the quick fixes make them two there is the alternate way also I'll show you that later on but for now let's let's make it like this okay let's make them to
• 09:00 - 09:30 and here also here also okay so as you can see now there is no error and let me first copy this whole thing
• 09:30 - 10:00 okay and then I'll show you here if I will increase the size of this you can see now it is looking just like it was looking in my notepad so this is this is the correct Json you have to provide correct Json here just copy and paste I have pasted it here and if I will now play the app and click on export Excel you can see if I'll open this Excel just see this this is my header
• 10:00 - 10:30 this is my first row this is my second row so this this was very this was very simple let me close this let me close this close this as well okay now our task is to export this Gallery data to to the Excel with this code component okay so let's do that in order to do that firstly what you need to do is again you
• 10:30 - 11:00 need to have this uh starting square bracket and inside that Curly bracket just use Ampersand sign here and this will be my closing thing okay I'll I'll just just use this closing tag square bracket okay now you might say why why you haven't used this extra curly braces just just wait and see like so I'll use concat
• 11:00 - 11:30 I'll use concat function here okay so what can cat do is firstly it will ask us to give it give some table so I'll use this Gallery as my table okay the name of that Gallery sample list gallery sample list Gallery okay dot all items okay now I have taken this and I have to do something like this this record Dot
• 11:30 - 12:00 ID and see it is it is giving error just just do this okay once you do this I have to add Ampersand here as well otherwise it will give error so now you can see if I play this app you you will see that all the my numbers like ID one two three four five all all are coming up here right but our task is to make something let me open Notepad
• 12:00 - 12:30 our task is to make something like this uh like closing this thing then this thing then ID okay wait wait wait ID then here should be number one this is my first same way if I copy this
• 12:30 - 13:00 if I do something like this so it it should be like this one two three four five six so see now now it is in correct format so it should be it should be something like this and so on and so forth I'm just using dot dot dot so it should be something like this now if we go to this thing so what we will do is just select this
• 13:00 - 13:30 here right so what we will do this we will say ID okay we will say ID we will do concatenate and we will put some single code like this okay uh and here we can if closing bracket and comma okay let me remove this from here and
• 13:30 - 14:00 let me add this here here only so let me just play the app and show you like currently how it is looking see opening bracket curly this looks good but again we need to keep this ID inside double quotes right so again the same way as I've shown you before wherever like you see this ID right just make double quotes double quotes and if you want like double quotes since
• 14:00 - 14:30 it is a number there is no need but if you want like this to be inside double quotes just again do double quotes and at the end also here just use double quote so if if I'll show you it will be like this ID colon this okay but at last see this this will give error if if we take this thing because there is extra comma is there so we have to remove this so what we can do
• 14:30 - 15:00 is we can use powerapps substitute function it is very simple see this uh this is this is my main text right this is my main text let me just do everything in the single line so that it is a lot easier to understand okay uh okay okay so this is my main text what is this this is my main text let's
• 15:00 - 15:30 consider it this is my text so I'll use this function Subs substitute all right what substitute takes is first it take the text so this is my main text as I told you before okay but I what I will substitute I need to substitute this comma this width with what I need to substitute I need to just substitute it with this and this and I'll close this and that's it now if I will play this now you will see that uh previously comma was there now it was
• 15:30 - 16:00 substituted with just this so now as I can see this is like correct Json let me copy this okay sorry let me just copy the code of this okay let me put the code of this inside this export Excel okay let me play the app and let me see is it exporting as you can see it exported so here you can see one two three four
• 16:00 - 16:30 five six so till I have 43 row 43 rows so I am getting all my IDs here all right so now let's export other other columns as well so let's open our app let's go here let's click on here now let me just do one thing let me keep this in a separate line so that it will be better understandable okay
• 16:30 - 17:00 so so the first thing is this ID correct this ID this ID we have done now our task is to the same way we did this now we have to do for other also so for that before this here here we see this right [Music] curly braces just put comma add say double quote double quote
• 17:00 - 17:30 inside this right name here you can see name okay the same way name just put some space a space here this curly brush bracket is closing right just simply do this okay let me add one more here name okay uh here what I need to provide is I need
• 17:30 - 18:00 to do something like this this item Dot and the name is I think rep so the name is rep once I will do this okay I have to do something like this also so let me just play this app for you first so here here see but here I forgot
• 18:00 - 18:30 to put double quote here rest is fine so let me add that double quote also otherwise if I simply use this code uh the app will not work okay so let me I have added the double quote let me play the app now see ID [Music] right now just see the ID is there one comma name so you can just see that this is this is
• 18:30 - 19:00 the valid Json it is opening it is closing it is opening it is closing so Name ID and it it seems correct so better better instead of like doing the whole thing at one go I can do everything in in one go but better if you are doing it for the first time just copy this paste the this code here and see if if this much of your code is working so here see for me it exported
• 19:00 - 19:30 uh just wait let's wait for for some time so see ID name and we can see that yeah for me it is exporting correctly for you might be if you are like the first time user just see this try to make this text like this uh square bracket curly bracket this ID colon 1 then comma Now again what I need to do comma region the same way I did
• 19:30 - 20:00 for name and ID I have to do for region and item so it will be like very simple now once I got this code right uh from from here I can take just I can take the reference of this code till here correct let me just oh man let me just copy the code or maybe let me just copy the code from
• 20:00 - 20:30 here till then I believe here let me copy this what I'll do is I'll add one more this I'll do M percent okay okay okay okay um nothing changed right uh okay
• 20:30 - 21:00 let me just paste this thing here there is one more extra let me remove this instead of this I'll say region okay okay there is there is extra let me remove extra name comma region colon and in region we will say region here this is region let me put this in another line so that it will be easy to understand
• 21:00 - 21:30 first one is ID second one is name then third one is this region all right and the fourth one is going to be your uh so the fourth one is going to this is the region right region is East coming up as correct and
• 21:30 - 22:00 this one is going to be item and here I can say item and the name of that is item name something so so I think this looks okay but just for the confirmation let me open it once so ID here I can see id1 then comma name Jones and reason is okay good then this
• 22:00 - 22:30 is like this comma item name close colon pencil so this looks good to me let me just copy the whole code of this and if there will be some error we will just Rectify it but to me it looks good let me paste the whole code here so let me you can take the screenshot of this or like click a picture
• 22:30 - 23:00 but like this is the whole deal let's play the app let's click on export to excel yeah for me it work so let's open the accelerate for some time and as we can see I have exported the whole data in the form of excel so you can see that my data is exported and have you noticed like how fast that is within like May micro second it just exported the whole Excel
• 23:00 - 23:30 so once your task is done just just delete this visual it is just for like practicing how you can make Json once you like familiarize with this you don't need you don't even need to do this just simply go up here and design your code okay so in this way you can export your gallery data to the Excel so this is it about this video and I
• 23:30 - 24:00 hope you learned something from this and if you did then please don't forget to like And subscribe the channel till then goodbye have a nice day