Tag Archives: PowerApps
Control elements in PowerApps with different font-size
Its good to have a user’s choice based font-size but without controlling how it displays on screen may not look good. I have created a simple design that consists of a header, gallery and font-size slider to show how elements react on certain font size. Here’s how it looks. How to make this, Set your font-size range into slider or any other control element like dropdown.Set Title or any text as value of slider or dropdown and use increment or decrement as per requirement.For example: Header title is X then sub-header will be X-2 font-size. To make gallery change its style as per font-sizeSelect ‘Wrap-count’ property of gallery and insert formulaIf(Slider.Value > 25, 1, 2);This will make 1 column is font size is more than 25 else 2. You can create this on every control/elements that requires such change. Hope this helped.
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!
Custom Card in Canvas Power Apps
In this blog will see custom cards in Power Apps Use Case: I wanted to separate fields on form by label and it was looking like below: here what i am came up with add custom card on form and try adding label on the Card. Add Custom Card Select form -> Click on edit fields Click on Add a custom Card Custom card will look like this, now change the position of card and try to move it below Name field. To change the position refer this blog: After Changing the Position of card: Now change the width of Card Add Label on Card and change color or style accordingly. and now add fields on the form Here is the final Output: Conclusion: in this we way we can separate fields by adding labels on the form in Canvas Power Apps.
Form Validation in Power Apps — Part 1
In this blog, we are going to see how we can do the implementation of form validation in Power Apps. Let get started, I have designed the Sign-Up page which has the following fields: Email Password and Confirm Password Phone Number Following is Screenshot of my Sign-Up Page build in PowerApps: Following is App Controls Structure which I have followed to Create Sign Up Form: I have used “ErrorText” which is HTML Label Control for Logging all the Validation Errors. Now, we will set the Properties on ErrorText control to display the error on the Form for Each Input Following is an explanation of each validation which I have used in this Power Apps: Email Validation Not(IsBlank(‘ControlName’)) — It will validate if Field is blank or not. IsMatch(‘ControlName’.Text , Match.Email) — It will validate the email format and return false if user enter invalid Email Address Code: Password and Confirm Password Validation Not(IsBlank(‘ControlName’)) — It will validate if Field is blank or not. ‘Confirm Password’.Text = Password.Text — It will validate if the password and confirm password are the same or not. It will return false if both password will not match. Code: Phone Number Validation Not(IsBlank(‘ControlName’)) — It will validate if Field is blank or not. IsMatch(‘Control’.Text, “Your country Phone Validation ReGex”) — It will validate if the entered phone number is valid or not using ReGex. I have used phone number validation ReGex for India — “^[6–9]\d{9}$” Following is an explanation of my ReGex: 5. Code: Following is full code for Validation you need to paste in Formula bar of HtmlText Property: Result: Blank Field Validation for each Fields — Email, Password, Confirm Password and Phone Number Email Format Validation Now, you can see after entering valid email error has gone Password and Confirm Password Match Validation Phone Number Format Validation Check After adding valid phone number error is gone Hope this helps, stay tuned for more blogs.
Form Validation in Power Apps — Part 2
In this blog, we will implement the following validation on our Sign Up Form in PowerApps: Disable Sign Up button if any invalid input is present in Form. Change Border or Fill Color Input which is invalid. Before moving forward please check out my previous blog because this blog is a continuation of my previous blog. Click Here Disable Sign Up button if any invalid input is present in Form Select the Sign-Up button in the form. 2. Select the property DisplayMode so that we can change Display Mode to disable if any invalid input is entered on Form 3. Add the following to in DisplayMode Formula Bar If(ErrorText.HtmlText = “”,Edit,Disabled) It means that when Error Text is empty it will enable the submit button or else it will disable it. Change Border or Fill Color Input which is invalid. Now we will add function in Fill and border to input if that input is Invalid. Email Input Select the Email Input and choice BorderColor Property. 2. Now, In BorderColor we will add the following code in the formula bar, so if Email Input is invalid or not in the format it will change the border color of input to red or you can add whatever color you want. 3. Code : 4. You can see in the following screenshot when an email is invalid or empty then the input border is red. Password and Confirm Password Input Password and Confirm Password Input 2. Now, In BorderColor we will add the following code in the formula bar, so if Password value doesn’t match with Confirm Password Input it will change the border color of input to red. 3. Code: 4. You can see in the following screenshot when password / confirm password does not match or empty then the input border is red 5. For Confirm password Field you can follow the same step as Password Field Phone Number Input Select the Phone Number Input and choice BorderColor Property 2. Now, In BorderColor we will add the following code in the formula bar, so if Phone Number Input is invalid or not in the format it will change the border color of input to red. 3. Code: 4. You can see in the following screenshot when phone no is invalid or empty then the input border is red. Here we finish with our blog, I hope this helps a lot and stay tuned for more blog like this. Thank you
Required Privilege for Canvas App in D365 CRM
Introduction This blog explains how to resolve the issue for Canvas App not loading which is embedded in D365 CRM using HTML Webresource. Issue After Canvas App was published and shared with Users still, they were unable to access the Power App. It was showing a blank page with no error. Resolution After debugging the Webpage, I concluded it was missing the Canvas App required privilege. The privilege can be found in D365 CRM as per below screenshot After creating a new role for sharing Canvas App and assigning to User, Canvas App rendered as below Conclusion I hope the above Blog helps you resolve the issue for Canvas App embedded using HTML Webresource in D365 CRM. Note: This privilege is only required for Canvas App embedded with HTML Webresource in D365 CRM.
Create Fruit Detection App inside Power Platform — PowerApps and AI Build
Before you begin with this Blog, please read my previous blog which was on How to Create Object Detection Model inside the Power Platform — PowerApps | AI Builder. In a previous blog, we have created the Object Detection Model that we are going to use in this blog. Step 1: Expand the AI Builder section in Power App and click on the Models. Open Fruit Detection Model that we have created in the Previous blog series. Click on the Use model and select the Create new App. It will redirect to the Power App Builder Studio. Step 2: You will see the Object Detector Control will automatically on the screen. Your application is ready you can run the detect the objects. Step 3: Now, we will insert the Gallery Control so that we can see the count of each object present in the images. Click on Insert and Select on the Add gallery. If you are not able to see the Option Expand the ribbon from Top right Side. Select Vertical and choose Title and Subtitle. Step 4: Click on the Gallery Control and set the property to ObjectDetector1.VisionObjects Click on the Title and set the property to ThisItem.displayName Click on the SubTitle and set the property to ThisItem.count We will do some changes in the font and alignment of the control so that the application should look simple, readable & accessible. Step 5: Click on File and Save the PowerApp. You can give the name and icon to your PowerApp. Your App is ready you can select your app and click on the Play. And Click Detect it will open your file explorer to select the images. If you are using this application on the mobile your camera will be open. Following is a screenshot of Application with detected Object Inside it. I hope this helps you to understand how to create an Object Detection models and use that Model in Power Apps.
Create Object Detection Model inside the Power Platform | Power Apps — AI Builder
In this blog, we are going to see how to create object detection model which can be used in PowerApps or MS Flow / PowerAutomate Step 1: Log in to portal.office.com. Select the PowerApps, If PowerApps is not visible then click on All Apps then you will able to see the PowerApps. Step 2: Expand the AI Builder Section and click on Build Section in PowerApps. Note: Please ensure that you are select the correct instance. Step 3: Click on the Object Detection Model We are going to create the Object Detection Model which can be used to created PowerApps or In MS Flow / Automate. Step 4: Name the AI Model and click on Create. Step 5: We will select the Domain of Model so we will go with Common Object. And click on Next. Step 6: Before moving forward, we will download the data which will be used to train and test the Model. Kaggle is the best source for the data to train the machine learning model. We will require the fruit images as we are designing the Fruit Detection Model, search fruit images and download the Dataset given in the screenshot. Select the Fruit Image for Object Detection Click on the Download Step 7: After downloading the Zip file extract it. You will see the following two folders — train_zip and test_zip respectively. Now, we will open the train_zip folder and you can see that there will be four categories of images Apple Banana Orange Mixed [Apple, Banana, Orange] Step 8: Let move back to the PowerApps Platform, 2nd step in the creation of Object Model is to define the object that we are going to detect. Here, we have three objects — Apple, Banana & Orange and click on next to move further steps. Step 9: We will require a minimum 15 images of each category to train our Object Detection Model. Now, we will click on Add Images and select Upload from local storage. Step 10: Select the images. Once all images are upload click on Close. Click on Next Step 11: Now, we are in the most important phase of the training where we provide the Tag or Label to the Images which we have uploaded. Click on the uploaded image and select the area where the object is present. Once you will select the area you will get the option to select the object is that present in the selection area. If an image is not suitable for the model to remove that particular image click on the “Don’t use Image ”. Click on remove to remove the image from the model data set. Step 12: Once you are done will the tagging or labeling the image click on the Done tagging. Note: Please ensure that you have a more tagged image for each model so that your model will work accurately. The more the label data more the accurate your machine learning model. Step 13: Click on the Train to start the training your model based on tagged images. Click on Go to Model It will take around 5–10 min to train based on your complexity of images, model and objects. Step 14: Publish the model. Once you model finished with done and you have published the Model. You can use that model to in Power App or MS Flow. We are going to see that in the next part of this blog.
How to fetch a custom table created in Business Central into PowerApps using CDS and Odata.
Introduction: In this blog, I have introduced how to fetch a custom table from Microsoft Dynamics 365 Business Central into Microsoft PowerApps using Common Data Service(CDS) and OData. The table that was created in Business Central was fetched into a custom entity(MatchingLists) in CDS that allows me to create a local database in PowerApps for storing the entity data and OData that helps to fetch and integrate the data. Pre-requisites: Microsoft Dynamics 365 Business Central Microsoft PowerApps Steps: 1. Create a custom entity within Common Data Service(CDS) whose data you want to retrieve from Business Central. 2. Add the fields with their required data types. 3. Get Data from Business Central using OData Integration. 4. Go to web services in Business Central, add the custom page in the web services and use its OData V4 URL. 5.Enter the OData URL and the Organization credentials. 6. You will be shown the list of tables in each and every company. 7. Go to the table whose data you want to get into PowerApps, and select that table. 8. Next is to select the entity to be mapped with this table and field by field mapping of the same. 9. Refresh can be set manual or automatically, if automatic then select the time. 10. Create a list structure to dsiplay the table.