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
This sample shows how to use third-party libraries to create controls in PowerApps component framework. The flip sample component is implemented based on angular.js, angular-ui, angular-animate, angular-sanitize, bootstrap. The code may not reveal the best practices for the mentioned third-party libraries.
17
+
This sample shows how to use third-party libraries to create components in PowerApps component framework. The flip sample component is implemented based on angular.js, angular-ui, angular-animate, angular-sanitize, bootstrap. The code may not reveal the best practices for the mentioned third-party libraries.
The PowerApps component framework allows you to persist state of component across multiple renderings of the component within the same session. It provides you with the ability to build controls that can maintain user state throughout the user's session as the user navigates to and from the component.
20
+
The PowerApps component framework allows you to persist state of component across multiple renderings of the component within the same session. It provides you with the ability to build components that can maintain user state throughout the user's session as the user navigates to and from the component.
21
21
22
-
For example, if your custom component is a long list that the user can scroll through, you could leverage the ***SetControlState*** functionality to remember the point in the list the user is looking at when they navigated away from the form. You could then add logic on component initialization to check the stored state and render the component's list at the point where the user was previously reading.
22
+
For example, if your code component is a long list that the user can scroll through, you could leverage the ***SetControlState*** functionality to remember the point in the list the user is looking at when they navigated away from the form. You could then add logic on component initialization to check the stored state and render the component's list at the point where the user was previously reading.
23
23
24
24
> [!div class="mx-imgBorder"]
25
25
> ![Control state API](../media/control-state-api.png"Control state API")
This sample component shows how to change the user experience of interacting with the dataset. For example, you only see the home page grid on an entity homepage as a table. You can build your custom component that can display the data as per your choice. This sample shows the records as tiles instead of the regular tabular grid.
20
+
This sample component shows how to change the user experience of interacting with the dataset. For example, you only see the home page grid on an entity homepage as a table. You can build your code component that can display the data as per your choice. This sample shows the records as tiles instead of the regular tabular grid.
21
21
22
22
> [!div class="mx-imgBorder"]
23
23
> ![Data Set Grid component](../media/data-set-grid.png"Data Set Grid component")
This sample describes how to bind a custom component to different fields on the form and use the value of these fields as input properties to the component.
16
+
This sample describes how to bind a code component to different fields on the form and use the value of these fields as input properties to the component.
> PowerApps component framework does not yet support composite fields, so you will not be able to bind this component to the out of the box latitude and longitude address fields. You need to bind the custom component to a different floating-point field.
149
+
> PowerApps component framework does not yet support composite fields, so you will not be able to bind this component to the out of the box latitude and longitude address fields. You need to bind the code component to a different floating-point field.
150
150
151
151
This sample component renders an `IFRAME` which displays `Bing Maps URL`. The component is bound to two floating point fields on the form, which are passed as parameters to the component and injected into the `IFRAME URL` to update the Bing Map to the latitude and longitude of the provided inputs.
152
152
@@ -172,7 +172,7 @@ Additional bound properties may be required or not. This will be enforced during
172
172
173
173
The initial rendering generates an `IFRAME` element and appends it to the controls container. This `IFRAME` is used to display the **Bing Map**. The url of the `IFRAME` is set to a `Bing Map URL` and includes the bound fields (latitudeValue and longitudeValue) in the url to center the map at the provided ___location.
174
174
175
-
The [updateView](../reference/control/updateview.md) method is invoked whenever one of these fields are updated on the form. This method updates the url of the **Bing Map** IFRAME to use the new latitude and longitude values passed to the component. To view this component in run time, bind the component to a field on the form like any other custom component.
175
+
The [updateView](../reference/control/updateview.md) method is invoked whenever one of these fields are updated on the form. This method updates the url of the **Bing Map** IFRAME to use the new latitude and longitude values passed to the component. To view this component in run time, bind the component to a field on the form like any other code component.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/sample-controls/linear-input-control.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ author: Nkrb
16
16
17
17
This sample component changes the user experience of interacting with numeric types on the form. Instead of keying in the numbers, the linear input component provides a linear slider using which the value of the attribute can be set on the form.
18
18
19
-
To implement this component, first you need to define the [Manifest](../manifest-schema-reference/manifest.md)file, and them implement the custom logic in TypeScript
19
+
To implement this component, first you need to define the [Manifest](../manifest-schema-reference/manifest.md)file, and them implement the custom logic in TypeScript
This sample shows how to use React to create controls using PowerApps component framework. The facepile sample component is implemented based on React and the Office UI Fabric React components. The code may not reveal the best practices for the mentioned third-party libraries.
18
+
This sample shows how to use React to create components using PowerApps component framework. The facepile sample component is implemented based on React and the Office UI Fabric React components. The code may not reveal the best practices for the mentioned third-party libraries.
> Although the PowerApps host applications work on top of React, the version of React you bundle will not communicate with the host version, nor is it dependent on that version. A new copy of React (or any third-party library you bundle with your control) will be loaded into the host page for every instance of that control, so be mindful of how large you are making your page(s) as you add controls. We will have a solution to this issue in a future release.
29
+
> Although the PowerApps host applications work on top of React, the version of React you bundle will not communicate with the host version, nor is it dependent on that version. A new copy of React (or any third-party library you bundle with your component) will be loaded into the host page for every instance of that control, so be mindful of how large you are making your page(s) as you add components. We will have a solution to this issue in a future release.
This sample provides examples on how to add dependencies for third-party libraries and Office UI Fabric, showcasing how to utilize the Office UI Fabric components for React for UI and perform bi-directional data-binding between the PowerApps component framework and the React state model.
50
50
51
-
The component sample consists of three Office UI Fabric components: a facepile, a slider, a check box, and a drop-down list. When you move the slider, the number of faces in the facepile changes. The check box controls whether the faces fade in and out or simply appear or disappear, and the options in the drop-down list control the size of the faces. If there is no value set, the number of faces defaults to 3.
51
+
The component sample consists of three Office UI Fabric components: a facepile, a slider, a check box, and a drop-down list. When you move the slider, the number of faces in the facepile changes. The check box components whether the faces fade in and out or simply appear or disappear, and the options in the drop-down list control the size of the faces. If there is no value set, the number of faces defaults to 3.
52
52
53
53
- When the component is loaded, the slider is set to the bound attribute value. The `context.parameters.[property_name].attributes` property contains the associated metadata.
54
54
- An event handler is passed in the React component's props; this will allow the React component to notify the host PowerApps component framework control that a value has changed. The event handler then determines if a call to the **notifyOutputEvents** method is necessary.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/sample-controls/table-control.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -413,13 +413,13 @@ color: #1160B7;
413
413
414
414
This sample provides examples on how to use methods from the `IClient, IUserSettings, IUtility, IFormatting interfaces`.
415
415
416
-
This component also showcases two utility functions, `setFullScreen` and `lookupObjects`. These functions are invoked by clicking the button rendered as part of the custom component. The `setFullScreen` button toggles the component in and out of full screen mode. The `lookupObjects` button opens a lookup dialog, and then inject the selected record as text into div.
416
+
This component also showcases two utility functions, `setFullScreen` and `lookupObjects`. These functions are invoked by clicking the button rendered as part of the code component. The `setFullScreen` button toggles the component in and out of full screen mode. The `lookupObjects` button opens a lookup dialog, and then inject the selected record as text into div.
417
417
418
418
In this sample, we render an HTML button and attach a JavaScript `onClick` event handler `onLookupObjectsButtonClick` to the button. On click of this button, we invoke `context.utils.lookupObjects()` method and pass as a parameter an array of entity names.
419
419
420
420
This method returns a JavaScript Promise object, representing the completion or failure of the call to the lookup dialog. If the promise is resolved successfully, the lookup object which the user selected is passed as a parameter into the callback method and can be referenced as data.id, data.name, data.entityType.
421
421
422
-
The callback method injects this information as HTML into a div rendered on the custom component to showcase the selected results to the user. If the promise is rejected, the error callback method is invoked where your component can handle the error scenario accordingly.
422
+
The callback method injects this information as HTML into a div rendered on the code component to showcase the selected results to the user. If the promise is rejected, the error callback method is invoked where your component can handle the error scenario accordingly.
The Web API component is designed to perform create, retrieve, update and delete actions. The component renders four buttons, which can be clicked to invoke different Web API actions. The result of the Web API call is injected into a HTML div element at the bottom of the custom component.
16
+
The Web API component is designed to perform create, retrieve, update and delete actions. The component renders four buttons, which can be clicked to invoke different Web API actions. The result of the Web API call is injected into a HTML div element at the bottom of the code component.
17
17
18
18
> [!div class="mx-imgBorder"]
19
19
> ![Web API component](../media/web-api-control.png"Web API component")
@@ -566,21 +566,21 @@ To change the default configuration to any entity or field, update the below con
The `createRecord` method renders three buttons, which allows you to create an account record with the revenue field set to different values (100, 200, 300).
574
574
575
-
When you click one of the create buttons, the button’s `onClick` event handler checks the value of the button clicked and use the Web API action to create an account record with the revenue field set to the button’s value. The name field of the account record will be set to `Web API Custom component (Sample)` with a random `int` appended to the end of the string. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
575
+
When you click one of the create buttons, the button’s `onClick` event handler checks the value of the button clicked and use the Web API action to create an account record with the revenue field set to the button’s value. The name field of the account record will be set to `Web API code component (Sample)` with a random `int` appended to the end of the string. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
576
576
577
577
The `deleteRecord` method renders a button which opens a lookup dialog when clicked. The lookup dialog allows you to select the account record you want to delete. Once an account record is selected from the lookup dialog, it is passed to the `deleteRecord` to delete the record from the database. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
578
578
579
-
The FetchXML `retrieveMultiple` method renders a button in the custom component. `onClick` of this button, FetchXML is generated and passed to the `retrieveMultiple` function to calculate the average value of the revenue field for all the accounts records. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
579
+
The FetchXML `retrieveMultiple` method renders a button in the code component. `onClick` of this button, FetchXML is generated and passed to the `retrieveMultiple` function to calculate the average value of the revenue field for all the accounts records. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
580
580
581
-
The OData `retrieveMultiple` method renders a button in the custom component. `onClick` of this button, OData string is generated and passed to the `retrieveMultiple` function to retrieve all account records with a name field that is like ‘Custom component Web API (Sample)’, which is true for all account records created by this custom component example.
581
+
The OData `retrieveMultiple` method renders a button in the code component. `onClick` of this button, OData string is generated and passed to the `retrieveMultiple` function to retrieve all account records with a name field that is like ‘code component Web API (Sample)’, which is true for all account records created by this code component example.
582
582
583
-
On successful retrieve of the records, the custom component has logic to count how many account records have the revenue field set to 100, 200 or 300, and display this count into an odata status container div on the custom component. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
583
+
On successful retrieve of the records, the code component has logic to count how many account records have the revenue field set to 100, 200 or 300, and display this count into an odata status container div on the code component. The callback method from the Web API call injects the result of the Web API call (success or failure) into the custom control’s result div.
0 commit comments