Skip to content

Commit abc27c7

Browse files
NkrbNkrb
committed
Samples update
1 parent 4247f76 commit abc27c7

File tree

3 files changed

+109
-93
lines changed

3 files changed

+109
-93
lines changed

‎powerapps-docs/developer/component-framework/add-custom-controls-to-a-field-or-entity.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ Code components let you transform fields that traditionally contain text into vi
2222
2323
## Add a code component to a field
2424

25-
Following the steps in this procedure will change the default label and text box field of the **Budget Amount** field to the slider code component on the Opportunity entity. You can use similar steps to replace an existing field with a code component or configure a code component for a custom field.
25+
Following the steps below will change the default label and text box field of the **Budget Amount** field to the slider code component on the Opportunity entity. You can use similar steps to replace an existing field with a code component or configure a code component for a custom field.
2626

2727
1. Open solution explorer.
2828

2929
2. Expand **Entities**, expand the entity that you want, such as the **Opportunity** entity, select **Forms**, and then open a form such as the **Main** form.
3030

31-
3. In the form editor, double-click the field where you want to add a code component, such as the **Budget Amount** field on the opportunity main form. Alternatively, you can create a custom field.
31+
3. In the form editor, double-click the field where you want to add a code component, such as the **Budget Amount** field on the opportunity main form. You can also create a custom field.
3232

3333
4. On the **Field Properties** page, select the **Controls** tab, and then select **Add Control**.
3434

@@ -53,17 +53,17 @@ Following the steps in this procedure will change the default label and text box
5353
> [!div class="mx-imgBorder"]
5454
> ![Add custom control properties](../../maker/model-driven-apps/media/ccf-add-properties.png "Add custom control properties")
5555
56-
- **Min**. Set the minimum accepted value. You can bind a static value that you enter or bind the value to an existing field. In this example **Bind to static value** is **Currency** and the minimum value that can be entered is *zero*.
56+
- **Min**. Set the minimum accepted value. You can bind a static value that you enter or binds the value to an existing field. In this example **Bind to static value** is **Currency** and the minimum value that can be entered is *zero*.
5757

5858
- **Bind to a static value**. Select the data type, such as a whole number (Whole.None), currency, floating point (FP), or decimal. Next, enter a number that represents the minimum accepted value for the field.
5959

6060
- **Bind to values on a field**. Select a field from the list that will be used as the minimum accepted value.
6161

62-
- **Max**. Set the maximum accepted value for the field. Similar to the Min value, you can bind a static value that you enter or bind the value to an existing field as described earlier. In this example, **Bind to static value** is **Currency** and the maximum value that can be entered is **1 billion**.
62+
- **Max**. Set the maximum accepted value for the field. Similar to the Min value, you can bind a static value that you enter or binds the value to an existing field as described earlier. In this example, **Bind to static value** is **Currency** and the maximum value that can be entered is **1 billion**.
6363

6464
- **Step**. This represents the unit to increment or decrement when adding to or subtracting from the current value. For example, for budget amount you can select 100 dollar increments\decrements.
6565

66-
- **Hide Default Control**. Selecting this option hides the component so neither the component or the data is displayed in any of the clients that don't support the code component.
66+
- **Hide Default Control**. Hides the component so neither the component or the data is displayed in any of the clients that don't support the code component.
6767

6868
8. Select **OK**, to close the Field Properties page.
6969

‎powerapps-docs/developer/component-framework/reference/entityrecord/getnamedreference.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Model-driven apps
2626

2727
## Return Value
2828

29-
**Type**: [Entityreference](../entityreference.md)
29+
**Type**: [EntityReference](../entityreference.md)
3030

3131

3232
### Related topics

‎powerapps-docs/developer/component-framework/sample-controls/iframe-control.md

Lines changed: 103 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -40,94 +40,110 @@ Model-driven apps and canvas apps (experimental preview)
4040
## Code
4141

4242
```TypeScript
43-
import { IInputs, IOutputs } from "./generated/ManifestTypes";
44-
export class TSIFrameControl
45-
implements ComponentFramework.StandardControl<IInputs, IOutputs> {
46-
// reference to Bing Map IFrame HTMLElement
47-
private _bingMapIFrame: HTMLElement;
48-
// reference to the control container HTMLDivElement
49-
// This element contains all elements of our custom control example
50-
private _container: HTMLDivElement;
51-
// Flag if control view has been rendered
52-
private _controlViewRendered: Boolean;
53-
/**
54-
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
55-
* Data-set values are not initialized here, use updateView.
56-
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
57-
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
58-
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
59-
* @param container If control is marked control-type='standard', it receives an empty div element within which it can render its content.
60-
*/
61-
public init(
62-
context: ComponentFramework.Context<IInputs>,
63-
notifyOutputChanged: () => void,
64-
state: ComponentFramework.Dictionary,
65-
container: HTMLDivElement
66-
) {
67-
this._container = container;
68-
this._controlViewRendered = false;
69-
}
70-
/**
71-
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
72-
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
73-
*/
74-
public updateView(context: ComponentFramework.Context<IInputs>) {
75-
if (!this._controlViewRendered) {
76-
this._controlViewRendered = true;
77-
this.renderBingMapIFrame();
43+
import {IInputs, IOutputs} from "./generated/ManifestTypes";
44+
45+
export class TSIFrameControl implements ComponentFramework.StandardControl<IInputs, IOutputs>
46+
{
47+
// Reference to Bing Map IFrame HTMLElement
48+
private _bingMapIFrame: HTMLElement;
49+
50+
// Reference to the control container HTMLDivElement
51+
// This element contains all elements of our custom control example
52+
private _container: HTMLDivElement;
53+
54+
// Flag if control view has been rendered
55+
private _controlViewRendered: Boolean;
56+
57+
/**
58+
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
59+
* Data-set values are not initialized here, use updateView.
60+
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
61+
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
62+
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
63+
* @param container If a control is marked control-type='starndard', it will receive an empty div element within which it can render its content.
64+
*/
65+
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
66+
{
67+
this._container = container;
68+
this._controlViewRendered = false;
69+
}
70+
71+
/**
72+
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
73+
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
74+
*/
75+
public updateView(context: ComponentFramework.Context<IInputs>)
76+
{
77+
if (!this._controlViewRendered)
78+
{
79+
this._controlViewRendered = true;
80+
this.renderBingMapIFrame();
81+
}
82+
83+
let latitude: number = context.parameters.latitudeValue.raw!;
84+
let longitude: number = context.parameters.longitudeValue.raw!;
85+
this.updateBingMapURL(latitude, longitude);
86+
}
87+
88+
/**
89+
* Render IFrame HTML Element that hosts the Bing Map and appends the IFrame to the control container
90+
*/
91+
private renderBingMapIFrame(): void
92+
{
93+
this._bingMapIFrame = this.createIFrameElement();
94+
this._container.appendChild(this._bingMapIFrame);
95+
}
96+
97+
/**
98+
* Updates the URL of the Bing Map IFrame to display the updated lat/long coordinates
99+
* @param latitude : latitude of center point of Bing map
100+
* @param longitude : longitude of center point of Bing map
101+
*/
102+
private updateBingMapURL(latitude:number, longitude:number): void
103+
{
104+
// Bing Map API:
105+
// https://msdn.microsoft.com/en-us/library/dn217138.aspx
106+
107+
// Provide bing map query string parameters to format and style map view
108+
let bingMapUrlPrefix = "https://www.bing.com/maps/embed?h=400&w=300&cp=";
109+
let bingMapUrlPostfix = "&lvl=12&typ=d&sty=o&src=SHELL&FORM=MBEDV8";
110+
111+
// Build the entire URL with the user provided latitude and longitude
112+
let iFrameSrc:string = bingMapUrlPrefix + latitude + "~"+ longitude + bingMapUrlPostfix;
113+
114+
// Update the IFrame to point to the updated URL
115+
this._bingMapIFrame.setAttribute("src", iFrameSrc);
116+
}
117+
118+
/**
119+
* Helper method to create an IFrame HTML Element
120+
*/
121+
private createIFrameElement(): HTMLElement
122+
{
123+
let iFrameElement:HTMLElement = document.createElement("iframe")
124+
iFrameElement.setAttribute("class", "TS_SampleControl_IFrame");
125+
return iFrameElement
126+
}
127+
128+
/**
129+
* It is called by the framework prior to a control receiving new data.
130+
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
131+
*/
132+
public getOutputs(): IOutputs
133+
{
134+
// no-op: method not leveraged by this example custom control
135+
return {};
136+
}
137+
138+
/**
139+
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
140+
* i.e. cancelling any pending remote calls, removing listeners, etc.
141+
*/
142+
public destroy()
143+
{
144+
// no-op: method not leveraged by this example custom control
145+
}
78146
}
79-
let latitude: number = context.parameters.latitudeValue.raw;
80-
let longitude: number = context.parameters.longitudeValue.raw;
81-
this.updateBingMapURL(latitude, longitude);
82-
}
83-
/**
84-
* Render IFrame HTML Element that hosts the Bing Map and appends the IFrame to the control container
85-
*/
86-
private renderBingMapIFrame(): void {
87-
this._bingMapIFrame = this.createIFrameElement();
88-
this._container.appendChild(this._bingMapIFrame);
89-
}
90-
/**
91-
* Updates the URL of the Bing Map IFrame to display the updated lat/long coordinates
92-
* @param latitude : latitude of center point of Bing map
93-
* @param longitude : longitude of center point of Bing map
94-
*/
95-
private updateBingMapURL(latitude: number, longitude: number): void {
96-
// Bing Map API:
97-
// https://msdn.microsoft.com/library/dn217138.aspx
98-
// Provide bing map query string parameters to format and style map view
99-
let bingMapUrlPrefix = "https://www.bing.com/maps/embed?h=400&w=300&cp=";
100-
let bingMapUrlPostfix = "&lvl=12&typ=d&sty=o&src=SHELL&FORM=MBEDV8";
101-
// Build the entire URL with the user provided latitude and longitude
102-
let iFrameSrc: string =
103-
bingMapUrlPrefix + latitude + "~" + longitude + bingMapUrlPostfix;
104-
// Update the IFrame to point to the updated URL
105-
this._bingMapIFrame.setAttribute("src", iFrameSrc);
106-
}
107-
/**
108-
* Helper method to create an IFrame HTML Element
109-
*/
110-
private createIFrameElement(): HTMLElement {
111-
let iFrameElement: HTMLElement = document.createElement("iframe");
112-
iFrameElement.setAttribute("class", "TS_SampleControl_IFrame");
113-
return iFrameElement;
114-
}
115-
/**
116-
* It is called by the framework prior to a control receiving new data.
117-
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
118-
*/
119-
public getOutputs(): IOutputs {
120-
// no-op: method not leveraged by this example custom control
121-
return {};
122-
}
123-
/**
124-
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
125-
* i.e. canceling any pending remote calls, removing listeners, etc.
126-
*/
127-
public destroy() {
128-
// no-op: method not leveraged by this example custom control
129-
}
130-
}
131147
```
132148

133149
## Resources

0 commit comments

Comments
 (0)