Tag Archives: #CustomControl
Create a Custom Real-time Loader Control in Canvas PowerApps
In Canvas PowerApps, we usually show an image that lies over the screen until an execution is completed. But tracking real-time update might be confusing. I’ll show you a simple custom loading control that not only show execution status but also look good and is highly customizable. Here’s a preview how it will look (Note: Determine your layout before hand like X,Y, Height and Width)(Customize your look, I’ve added dots above just for demonstration purpose.)How to make this, Elements used visually are, Create a Rectangle as main background and set Height, Width, X and Y. (I’ve used light grey color) Insert another Rectangle to show loading animation which will fit inside main Rectangle.Determine its Height, Width, X and Y. Label control to show current status or add a simple static label. Gallery Control having circle in them i.e.: Dots (Optional, I used to show how i retrieve data as its similar to Navigation Screen Gallery Control used in 1 of predefined template in Canvass PowerApps) Functionality behind used are, Gallery Control under ‘Items’ I’ve added table. (Based on your content, keep total count of steps you would like to see in loading page. In my case, i have 6 steps) Label Control that shows current status based on current step. Rectangle with loading animation. (Note: Your step count and width may vary) Now you may have a button that will call list of execution that you will perform. To track every successful completion of process just add this, Later reset count and turn visibility off. (Note: This is re-usable and can be used as component.) Hope this helps.
Create a Custom Dropdown Control in Canvas PowerApps
As we know that a Standard Dropdown control do not have enough features and has limited properties to modify. Hence I have created a custom dropdown menu. Some drawbacks in Standard Dropdown,1. It shows only 1 particular attribute as value. Example: “Name”2. If multiple records of same name exist, then you cannot differentiate them. This is Custom Dropdown I have created, Steps to make the custom dropdown menu Step 1. Insert a ‘Text Input’ and ‘Horizontal Gallery’ and set height of gallery of your desired height also change Template Size according to fields added into a row. (As I have added only Name, Phone and Image) Step 2: Add an Icon ‘Down Arrow’ at the right of ‘Text Input’ and change property. onSelect = UpdateContext({showDropdown: !showDropdown}) //Condition to show/hide the CustomDropdown (Gallery). Step 3: Property to be changed.‘Text Input’ changes below, Default = textVal //It’s a Variable Fill = // Anything you feel suitable, I used “RGBA(230, 230, 230, 1)” Height and Text Size = // Anything you feel suitable. onChange = UpdateContext({showDropdown: !IsBlank(Self.Text)}) // Condition to show/hide the CustomDropdown (Gallery). ‘Gallery’ changes below, Items = Search(Accounts, TextInput.Text, “name”) // Filter Parameter by text. showScrollBar = false TemplateFill = // Anything you feel suitable, I used “RGBA(255, 255, 255, 1)” TemplatePadding = 10 TemplateSize = // As per your contents in a row Visible = showDropdown //It’s a Variable Step 4: To add functionality of basic dropdown on selection.Add a button to of size equal to template Size (i.e: cover entire record section) and change properties given below, onSelect = UpdateContext({textval: ThisItem.’Account Name’}) //Defined variable HoverFill = //Anything you feel suitable, I used “ColorFade(RGBA(240,240,240, 0.3), -10%)” Step 5: Custom Dropdown complete. You will have something like this, Note: For additional responsiveness in design, change X, Y, Height, Width. Hope this helps!