{"id":33745,"date":"2023-01-16T14:32:22","date_gmt":"2023-01-16T09:02:22","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=33745"},"modified":"2023-02-07T14:45:47","modified_gmt":"2023-02-07T09:15:47","slug":"an-overview-of-power-apps-cards","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/01\/an-overview-of-power-apps-cards\/","title":{"rendered":"An overview of Power Apps Cards"},"content":{"rendered":"

Microsoft has added a preview of their new feature called Cards<\/strong> in the wave 2 release.\u00a0 Cards are simplified forms that are connected to Dataverse which can be sent to CRM users to capture the required details. Here, in this blog, we have taken the example of the Event Registration form for any event where an employee can enter their information and register for the event. All their data will be stored inside the Dynamics 365 CRM for future reference.<\/p>\n

You can follow the below steps to create a card for the above requirement.<\/p>\n

Step 1<\/strong>: Sign in to PowerApps<\/em><\/a> using your credentials and select your environment.<\/p>\n

\"Power<\/p>\n

Step 2<\/strong>: Select Cards (Preview)<\/strong> option.<\/p>\n

\"Power<\/p>\n

Step 3:<\/strong> Click on Create<\/strong> option<\/p>\n

\"Power<\/p>\n

Step 4<\/strong>: Give the appropriate name and description to the card and click on Create<\/strong> Button.<\/p>\n

\"Power<\/strong><\/p>\n

Step 5<\/strong>: Edit your card.<\/p>\n

1. Click on the title area.<\/p>\n

\"Power<\/p>\n

2. After selecting the title area, a side panel will open on the right side where you can edit the properties of that title. I gave the name of that title in the Text<\/strong> section. You can also customize other properties as well like the alignment, spacing, size, or weight of the text, etc.<\/p>\n

\"Power<\/p>\n

3. Drag and drop the Text label<\/strong> on the card by expanding the Display section.<\/strong><\/p>\n

\"Power<\/strong>
\n4. Give a proper name to the label i.e., Employee Name in the properties section in the right-side panel.<\/p>\n

\"Power<\/p>\n

5. Since it\u2019s a form we need an input type field to accept the information from the user. To add an input text field please drag and drop Text Input<\/strong> from the I<\/strong>nput<\/strong> section.<\/p>\n

\"Power<\/p>\n

6. Edit the property of that text field from the properties window. Here for the text field, we have selected the style as Text<\/strong>.<\/p>\n

\"Power<\/p>\n

Similarly add Employee<\/strong> ID<\/strong>, Address<\/strong>, Department, <\/strong>etc. fields on the card.<\/p>\n

7. Further, add Phone No.<\/strong> field and add a text field with style as tel. <\/strong>Also, I have marked the phone no. <\/strong>field as a Required field <\/strong>by setting the toggle as Yes. <\/strong>You can also validate the field using regular expressions. Here I am validating the Phone no. field.<\/p>\n

\"Power<\/p>\n

8. Similarly, I have added the Email ID<\/strong> field with the properties as Required field<\/strong> and have set an Error Message<\/strong> as \u201cPlease add the valid Email ID\u201d. You can also validate the field using regular expression i.e. Regex<\/strong>. Here I am validating the Email ID field.<\/p>\n

\"Power<\/p>\n

9. For downtown, select the Dropdown<\/strong> option in the Input<\/strong> section<\/strong> and add the choices<\/strong> in the right panel.<\/p>\n

\"Power<\/p>\n

10. For the Event Date<\/strong> field, I have added the Date Picker<\/strong> from the Input Section<\/strong> and have set the Minimum<\/strong> value<\/strong> and Maximum value<\/strong>.<\/p>\n

\"Power<\/p>\n

11. For the Time of the Event<\/strong> field, I have added Time Picker<\/strong> from the Input Section<\/strong> and added the Minimum value<\/strong> and Maximum value<\/strong>.<\/p>\n

\"Power<\/p>\n

12. Next, I added a button in the registration form from the Button<\/strong> from Input Section <\/strong>and named the button Submit<\/strong>.<\/p>\n

\"Power<\/p>\n

13. Lastly, I have added the Image through the Image<\/strong> from the Display Section<\/strong>. We have to add the URL<\/strong> of the image and set some properties<\/strong> like Alignment<\/strong>, Height<\/strong>, etc.<\/p>\n

\"Power<\/p>\n