{"id":29457,"date":"2021-09-30T16:45:15","date_gmt":"2021-09-30T11:15:15","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=29457"},"modified":"2023-09-08T12:57:21","modified_gmt":"2023-09-08T07:27:21","slug":"use-of-code-components-in-power-apps-portal","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/09\/use-of-code-components-in-power-apps-portal\/","title":{"rendered":"Use of Code Components in Power Apps Portal"},"content":{"rendered":"

Introduction<\/strong><\/h3>\n

Microsoft in the latest release brought many new features in Dynamics 365 CRM which also includes one of the most awaited features – support of Code Components in Power Apps Portal.<\/p>\n

In this blog, we will see how we can configure and show a PCF Control in the Power Apps Portal. Kindly note this feature is still in Preview stage<\/a>.<\/p>\n

Since it is very easy to use, we will make this blog precise and short.<\/p>\n

At first, Power Apps Portal should be configured. To know more on how to configure the Power Apps portal refer this link<\/strong><\/a>.<\/p>\n

Once the Power Apps Portal is configured, when you navigate to the portal page you will see some existing pages like the Contact Us <\/strong>page which we would be using to show the PCF Control in the Power Apps portal in the below example. The Contact Us page is associated to the Lead table and thus this page shows columns from the Lead table Form.<\/p>\n

Step 1:<\/strong> Move to make.powerapps.com<\/a> and select your environment on which you have enabled the Power Apps Portal.<\/p>\n

Step 2: <\/strong>Create a new solution and add Lead table along with 1 Form that is \u201cContact Us Personal Web Form\u201d<\/strong> in the solution.<\/p>\n

Note:<\/em><\/strong> The \u201cContact Us Personal Web Form\u201d<\/strong> is the form which is used to show the details in the Contact Us <\/strong>page on the Power Apps portal.<\/em><\/p>\n

Step 3:<\/strong> Create few fields such as Age, Gender, Rating and Signature.<\/p>\n

\"Power<\/p>\n

Step 4: <\/strong>Next, open the form which we have added in the solution.<\/p>\n

Kindly note, in case you are not able to view the required PCF control from the power platform interface switch to classic interface.<\/p>\n

To edit the form in classic interface, click on the Switch to classic<\/strong> button.<\/p>\n

\"Power<\/p>\n

Step 5:<\/strong> Here we have to set the PCF Controls to each of our field.<\/p>\n

\"Power<\/p>\n

Step 6: <\/strong>So far, we have set the PCF Control to our Model Driven App.<\/p>\n

However, to make it visible in the Power Apps portal follow the steps given below:<\/p>\n