You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: powerapps-docs/maker/portals/component-framework-liquid.md
+7-10Lines changed: 7 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -5,21 +5,20 @@ author: GitanjaliSingh33msft
5
5
ms.service: powerapps
6
6
ms.topic: conceptual
7
7
ms.custom:
8
-
ms.date: 11/10/2021
8
+
ms.date: 02/02/2022
9
9
ms.subservice: portals
10
10
ms.author: gisingh
11
11
ms.reviewer: ndoelman
12
12
contributors:
13
13
- nickdoelman
14
14
- GitanjaliSingh33msft
15
-
- nickdoelman
16
15
---
17
16
18
-
# Liquid template tag for code components (preview)
17
+
# Liquid template tag for code components
19
18
20
19
[This article is pre-release documentation and is subject to change.]
21
20
22
-
Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. These code components can provide an enhanced experience for users working with data on forms, views, and dashboards. More information: [Use code components in portals (preview)](component-framework.md)
21
+
Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. These code components can provide an enhanced experience for users working with data on forms, views, and dashboards. More information: [Use code components in portals](component-framework.md)
23
22
24
23
> [!IMPORTANT]
25
24
> The Liquid template tag for code components requires portals version [9.3.10.x or later](/power-platform/released-versions/portals/portalupdate9310x).
@@ -50,15 +49,15 @@ You can use the [sample map control](../../developer/component-framework/sample-
50
49
51
50
## Tutorial: Use code components on pages with Liquid template tag
52
51
53
-
In this tutorial, you'll configure Power Apps portals to add the component to a webpage and set access for the **Web Resource** table. You'll then visit the portals webpage and interact with the component.
52
+
In this tutorial, you'll configure Power Apps portals to add the component to a webpage. You'll then visit the portals webpage and interact with the component.
54
53
55
54
### Before you begin
56
55
57
56
If you're using the sample code component used in this tutorial, ensure that you first import the sample solutions to the environment before you begin. To learn about solution import, go to [Import solutions](../data-platform/import-update-export-solutions.md).
58
57
59
58
### Prerequisites
60
59
61
-
For prerequisites, and to learn about supported/unsupported code components in portals, go to [Use code components in portals (preview)](component-framework.md).
60
+
For prerequisites, and to learn about supported/unsupported code components in portals, go to [Use code components in portals](component-framework.md).
62
61
63
62
> [!NOTE]
64
63
> This tutorial uses a sample code component created using Power Apps component framework to demonstrate a map control on a webpage. You can also use any existing or new component of your own, and any other webpage for this tutorial. In this case, be sure to use your component and webpage when following the steps in this tutorial. For more information about how to create code components, go to [Create your first component](../../developer/component-framework/implementing-controls-using-typescript.md).
@@ -110,10 +109,6 @@ For prerequisites, and to learn about supported/unsupported code components in p
110
109
111
110
1. The webpage will now show the control added on it.
112
111
113
-
### Step 2. Allow Read access to the Web Resource table
114
-
115
-
Follow the steps outlined in [Allow Read access to the Web Resource table](component-framework-tutorial.md#step-5-allow-read-access-to-the-web-resource-table).
116
-
117
112
## Next steps
118
113
119
114
[Overview: Use code components in portals](component-framework.md)
@@ -126,3 +121,5 @@ Follow the steps outlined in [Allow Read access to the Web Resource table](compo
126
121
[Create your first component](../../developer/component-framework/implementing-controls-using-typescript.md) <br>
127
122
[Add code components to a column or table in model-driven apps](../../developer/component-framework/add-custom-controls-to-a-field-or-entity.md)<br>
128
123
[Implement a sample portal Web API component](implement-webapi-component.md)
Copy file name to clipboardExpand all lines: powerapps-docs/maker/portals/component-framework-tutorial.md
+36-68Lines changed: 36 additions & 68 deletions
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ author: sandhangitmsft
5
5
ms.service: powerapps
6
6
ms.topic: conceptual
7
7
ms.custom:
8
-
ms.date: 04/21/2021
8
+
ms.date: 02/02/2022
9
9
ms.subservice: portals
10
10
ms.author: nenandw
11
11
ms.reviewer: ndoelman
@@ -15,11 +15,9 @@ contributors:
15
15
- HemantGaur
16
16
---
17
17
18
-
# Tutorial: Use code components in portals (preview)
18
+
# Tutorial: Use code components in portals
19
19
20
-
[This article is pre-release documentation and is subject to change.]
21
-
22
-
In this tutorial, you'll create a sample component using Power Apps component framework. You'll package this component to a Dataverse environment and add the component to a model-driven app. You'll then configure Power Apps portals to add the component to a basic form, set access for the **Web Resource** table, and add the basic form to a webpage. Finally, you'll visit the portals webpage and interact with the component.
20
+
In this tutorial, you'll create a sample component using Power Apps component framework. You'll package this component to a Dataverse environment and add the component to a model-driven app. You'll then configure Power Apps portals to add the component to a basic form and add the basic form to a webpage. Finally, you'll visit the portals webpage and interact with the component.
23
21
24
22
## Prerequisites
25
23
@@ -52,117 +50,86 @@ In this step, you’ll create a new basic form in portals and then add the compo
52
50
53
51
1. Open [Portal Management](configure/configure-portal.md) app.
54
52
55
-
2. On the left pane, under **Content**, select **Basic Forms.**
53
+
1. On the left pane, under **Content**, select **Basic Forms.**
56
54
57
-
3. Select **New**.
55
+
1. Select **New**.
58
56
59
-
4. Enter **Name**. For example, *Opportunities basic form with code
57
+
1. Enter **Name**. For example, *Opportunities basic form with code
60
58
component*.
61
59
62
-
5. Select **Basic Name** as *Opportunity*.
60
+
1. Select **Basic Name** as *Opportunity*.
63
61
64
-
6. For **Form Name**, select the model-driven app form that you added the code
62
+
1. For **Form Name**, select the model-driven app form that you added the code
65
63
component to earlier in this tutorial.
66
64
67
-
7. Select the **Tab Name**.
65
+
1. Select the **Tab Name**.
68
66
69
-
8. Select your portal **Website**.
67
+
1. Select your portal **Website**.
70
68
71
69
![Configure basic form using Portal Management app.](media/component-framework/new-entity-form.png"Configure basic form using Portal Management app")
72
70
73
-
9. Select **Save & Close**.
71
+
1. Select **Save & Close**.
74
72
75
73
### Step 4.2. Add code component to the basic form
76
74
77
75
1. Open [Portal Management](configure/configure-portal.md) app.
78
76
79
-
2. On the left pane, under **Content**, select **Basic Forms.**
77
+
1. On the left pane, under **Content**, select **Basic Forms.**
80
78
81
-
3. Select the basic form you created in the previous step.
79
+
1. Select the basic form you created in the previous step.
82
80
83
-
4. Select **Related**.
81
+
1. Select **Related**.
84
82
85
-
5. Select **Basic Form Metadata**.
83
+
1. Select **Basic Form Metadata**.
86
84
87
-
6. Select **New Basic Form Metadata**.
85
+
1. Select **New Basic Form Metadata**.
88
86
89
-
7. Select **Type** as **Attribute**.
87
+
1. Select **Type** as **Attribute**.
90
88
91
-
8. Select **Attribute Logical Name** as *Budget Amount (budgetamount)*.
89
+
1. Select **Attribute Logical Name** as *Budget Amount (budgetamount)*.
## Step 5. Allow Read access to the Web Resource table
104
-
105
-
1. Open [Portal Management](configure/configure-portal.md) app.
106
-
107
-
2. On the left pane, under **Security**, select **Table Permissions.**
108
-
109
-
3. Select **New**.
110
-
111
-
4. Enter **Name**. For example, *Permissions for code component on the Web
112
-
Resource table*.
113
-
114
-
5. Select **Table** as **Web Resource (webresource)**.
115
-
116
-
6. Select your **Website**.
117
-
118
-
7. For **Scope**, select **Global**.
119
-
120
-
8. In the **Privileges** section, select **Read**.
121
-
122
-
9. Select **Save.**
123
-
124
-
![Permissions for code component.](media/component-framework/permissions.png"Permissions for code component")
125
-
126
-
10. Under **Web Roles**, select **Add Existing Web Role**.
127
-
128
-
11. Choose the web role as required. For example, choose the *Authenticated Users* web role of a portal website record to allow access to all authenticated users.
129
-
130
-
![Web Role for code component.](media/component-framework/webrole.png"Web Role for code component")
131
-
132
-
12. Select **Save & Close**.
99
+
1. Select **Save & Close**.
133
100
134
-
## Step 6. Create a webpage in portals with the basic form
101
+
## Step 5. Create a webpage in portals with the basic form
135
102
136
103
1. Open your portal in [Power Apps portals Studio](portal-designer-anatomy.md).
137
104
138
-
2. On the top-left corner, select **New page**.
105
+
1. On the top-left corner, select **New page**.
139
106
140
-
3. Select **Blank**.
107
+
1. Select **Blank**.
141
108
142
-
4. On the right-side property pane, update the webpage name. For example, *Opportunities.*
109
+
1. On the right-side property pane, update the webpage name. For example, *Opportunities.*
143
110
144
-
5. Update partial URL. For example, *opportunities.*
111
+
1. Update partial URL. For example, *opportunities.*
145
112
146
-
6. Expand **Permissions**.
113
+
1. Expand **Permissions**.
147
114
148
-
7. Disable **Page available to everyone**.
115
+
1. Disable **Page available to everyone**.
149
116
150
-
8. Select the web roles that should be allowed access to this page.
117
+
1. Select the web roles that should be allowed access to this page.
151
118
152
-
9. Inside the page editor, below the Header section, select the **Column** section.
119
+
1. Inside the page editor, below the Header section, select the **Column** section.
153
120
154
-
10. On the left pane, select **Components**.
121
+
1. On the left pane, select **Components**.
155
122
156
-
11. Under **Portal components**, select **Form**.
123
+
1. Under **Portal components**, select **Form**.
157
124
158
-
12. On the right-side property pane, select **Use existing**.
125
+
1. On the right-side property pane, select **Use existing**.
159
126
160
-
13. Under **Name**, select the basic form that you created earlier in this tutorial.
127
+
1. Under **Name**, select the basic form that you created earlier in this tutorial.
161
128
162
129
> [!TIP]
163
130
> If you don’t see the form available, try **Sync Configuration** to synchronize changes from Dataverse.
164
131
165
-
14. On the top-right corner, select **Browse website**.
132
+
1. On the top-right corner, select **Browse website**.
166
133
167
134
The webpage will now show the basic form for the **Opportunities** table with the code component as the slider, similar to how it appears using the model-driven app for the same form.
168
135
@@ -178,3 +145,4 @@ The webpage will now show the basic form for the **Opportunities** table with th
178
145
[Create your first component](../../developer/component-framework/implementing-controls-using-typescript.md) <br>
179
146
[Add code components to a field or table in model-driven apps](../../developer/component-framework/add-custom-controls-to-a-field-or-entity.md)
Copy file name to clipboardExpand all lines: powerapps-docs/maker/portals/component-framework.md
+12-52Lines changed: 12 additions & 52 deletions
Original file line number
Diff line number
Diff line change
@@ -1,41 +1,37 @@
1
1
---
2
-
title: Use code components in portals (preview)
2
+
title: Use code components in portals
3
3
description: Learn about creating code components for model-driven and canvas apps using Power Apps component framework inside Power Apps portals.
4
-
author: sandhangitmsft
4
+
author: GitanjaliSingh33msft
5
5
ms.service: powerapps
6
6
ms.topic: conceptual
7
7
ms.custom:
8
-
ms.date: 11/18/2021
8
+
ms.date: 02/02/2022
9
9
ms.subservice: portals
10
-
ms.author: nenandw
10
+
ms.author: gisingh
11
11
ms.reviewer: ndoelman
12
12
contributors:
13
13
- nickdoelman
14
-
- sandhangitmsft
14
+
- GitanjaliSingh33msft
15
15
- HemantGaur
16
16
---
17
17
18
-
# Use code components in portals (preview)
18
+
# Use code components in portals
19
19
20
-
[This article is pre-release documentation and is subject to change.]
21
-
22
-
Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps (public preview). These code components can provide an enhanced experience for users working with data on forms, views, and dashboards. More information: [Power Apps component framework overview](../../developer/component-framework/overview.md)
20
+
Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. These code components can provide an enhanced experience for users working with data on forms, views, and dashboards. More information: [Power Apps component framework overview](../../developer/component-framework/overview.md)
23
21
24
22
Power Apps portals now supports controls for model-driven apps created using Power Apps component framework. To use code components in portals webpages, follow these steps:
25
23
26
-
![Create code component using component framework, then add the code component to a model-driven app form, and configure the code component field inside the basic form for portals and allow Read permission to the Web Resource table.](media/component-framework/steps.png"Create code component using component framework, then add the code component to a model-driven app form, and configure the code component field inside the basic form for portals and allow Read permission to the Web Resource table.")
24
+
![Create code component using component framework, then add the code component to a model-driven app form, and configure the code component field inside the basic form for portals.](media/component-framework/steps.png"Create code component using component framework, then add the code component to a model-driven app form, and configure the code component field inside the basic form for portals.")
27
25
28
26
After following these steps, your users can now interact with the code component using the portal page that has the respective basic form.
> - Portals only currently support [code components that are added to a field](../../developer/component-framework/add-custom-controls-to-a-field-or-entity.md#add-a-code-component-to-a-column) in a model-driven app.
34
30
35
31
## Prerequisites
36
32
37
-
-You must have a valid Power Apps license. More information: [Power Apps component framework licensing](../../developer/component-framework/overview.md#licensing)
38
-
-You must have System Administrator privileges to enable the Power Apps component feature in the environment.
33
+
- You must have a valid Power Apps license. More information: [Power Apps component framework licensing](../../developer/component-framework/overview.md#licensing)
34
+
- You must have System Administrator privileges to enable the Power Apps component feature in the environment.
39
35
- Your portal version must be [9.3.3.x](versions/version-9.3.3.x.md) or higher.
40
36
- Your starter portal package must be [9.2.2103.x](versions/package-version-9.2.2103.md) or higher.
41
37
@@ -142,7 +138,7 @@ To learn how to add a code component to a field in model-driven app, go to [Add
142
138
143
139
## Configure portal for code component
144
140
145
-
After the code component is added to a field in a model-driven app, you can configure portals to use the code component on a basic form. Once you configure the code component on a basic form, be sure to configure the table permission to allow portal users **Read** access to the **Web Resource** table before they can see the component on the portal page.
141
+
After the code component is added to a field in a model-driven app, you can configure portals to use the code component on a basic form.
146
142
147
143
To add a code component to a basic form:
148
144
@@ -168,43 +164,6 @@ To add a code component to a basic form:
168
164
169
165
1. Save and close the form.
170
166
171
-
> [!Important]
172
-
> If the basic form *Auto Generate Steps From Tabs* is selected in the **Additional Settings** section of the **Form Options** tab, the code component will not be loaded for the attribute on the web page.
173
-
174
-
## Allow Read access to a Web Resource table
175
-
176
-
Portals requires **Read** permission to be set on the **Web Resource** table before users can see the code component on the webpage with the basic form.
177
-
178
-
To configure Read access on a **Web Resource** table:
179
-
180
-
1. Open [Portal Management](configure/configure-portal.md) app.
181
-
182
-
1. On the left pane, select **Table Permission**.
183
-
184
-
1. Select **New**.
185
-
186
-
1. Enter **Name.**
187
-
188
-
1. Select *Web Resource (webresource)* for **Table Name**.
189
-
190
-
1. Select your website record.
191
-
192
-
1. Select *Global* for **Scope.**
193
-
194
-
1. In **Privileges**, select *Read*.
195
-
196
-
1. Select **Save**.
197
-
198
-
1. Under the **Web Roles** section, select **Add Existing Web Role**.
199
-
200
-
1. Select the web role for the users that should see the code component in portals.
201
-
202
-
For example, **Anonymous Users** for anonymous users, **Authenticated Users** for users authenticated by portals, or a custom web role.
203
-
204
-
1. Select **Save & Close**.
205
-
206
-
Once you add the basic form to a webpage, users assigned to the selected web role will be able to see the code component on the portal page having the selected basic form.
207
-
208
167
## Code components using the portal Web API
209
168
210
169
A code component can be built and added to a webpage that can use the [portal Web API](web-api-overview.md) to perform create, retrieve, update, and delete actions. This feature allows greater customization options when developing portal solutions. For more information, go to [Implement a sample portal Web API component](implement-webapi-component.md).
@@ -219,3 +178,4 @@ A code component can be built and added to a webpage that can use the [portal We
219
178
[Create your first component](../../developer/component-framework/implementing-controls-using-typescript.md) <br>
220
179
[Add code components to a column or table in model-driven apps](../../developer/component-framework/add-custom-controls-to-a-field-or-entity.md)
0 commit comments