Merge branch 'mendix-11' into yl-remove-or-update-Mendix-10-instances

Author: Yiyun333

content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties.md

@@ -237,7 +237,7 @@ Here is an example of a **Colorpicker** design property using classes:
 ```js
 {
     "name": "Background color",
-    "type": "Colorpicker",
+    "type": "ColorPicker",
     "description": "Description of Background color Property",
     "options": [
         {
@@ -261,7 +261,7 @@ Here is an example of a **Colorpicker** design property using CSS variables:
 ```js
 {
     "name": "Background color",
-    "type": "Dropdown",
+    "type": "ColorPicker",
     "property": "background-color",
     "description": "Description of Background Color Property",
     "options": [
@@ -281,7 +281,9 @@ Here is an example of a **Colorpicker** design property using CSS variables:
 }
 ```
 
-Note: if you can not provide a value for the preview, it is recommended to instead use a **Dropdown** design property. If at a later point in time you can provide the preview, you can always change the type from a **Dropdown** to a **Colorpicker**.
+If no preview is specified, the value of the CSS variable will be used by default. Therefore, you can omit the preview property if your design property is based on CSS variables. However, if your design property is based on classes, it is recommended to provide a preview.
+
+You can always change the type from a **Colorpicker** to a **Dropdown** if needed.
 
 This is how the **Colorpicker** design property appears:
 

content/en/docs/apidocs-mxsdk/apidocs/frontend/pluggable-widgets/pluggable-widgets-client-apis/_index.md

@@ -56,24 +56,40 @@ export interface ActionValue {
 }
 ```
 
-#### 4.1.1 canExecute
+#### canExecute {#canexecute}
 
 The flag `canExecute` indicates if an action can be run under current conditions. This prevents executing actions that are not allowed by the app's security settings. User roles can be set in the microflows and nanoflows, allowing users to call them. For more information on user roles and security, see the [Module Security Reference Guide](/refguide/module-security/).
 
 You can also employ this flag when using a **Call microflow** action triggering a microflow with a parameter. Such an action cannot be run until a parameter object is available, for example when a parent data view has finished loading. Attempting to `execute` an action that cannot be run will have no effect, and generates a debug-level warning message.
 
 The exception to this behavior is when the `ActionValue` is returned by [`ListActionValue.get()`](/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis-list-values/#listactionvalue). In this case, the flag will be true when not all arguments have been loaded. Calling `execute()` for an action with loading arguments will run the action as soon as all arguments become available. While waiting, `isExecuting` will be set to `true` and subsequent calls to `execute()` are ignored. If any arguments become unavailable after loading, the action will not run and a debug-level warning message will be logged.
 
-#### 4.1.2 isExecuting
+#### isExecuting {#isexecuting}
 
 The flag `isExecuting` indicates whether an action is currently running. A long-running action can take seconds to complete. Your component might use this information to render an inline loading indicator which lets users track loading progress. Often it is not desirable to allow a user to trigger multiple actions in parallel. Therefore, a component (maybe based on a configuration) can decide to skip triggering an action while a previous execution is still in progress.
 
 Note that `isExecuting` indicates only whether the current action is running. It does not indicate whether a target nanoflow, microflow, or object operation is running due to another action.
 
-#### 4.1.3 execute
+#### execute {#execute}
 
 The method `execute` triggers the action. It returns nothing and does not guarantee that the action will be started synchronously. But when the action does start, the component will receive a new prop with the `isExecuting` flag set.
 
+When the action property [defines action variables](/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/#action-xml-elements), the `execute()` method expects an object map containing a property for each variable. The variables may be passed as undefined, but need to be set explicitly.
+
+Given an action property that defines two `Decimal` variables `lat` and `long`, and a `String` variable named `label`, its `execute()` method accepts the following input:
+
+```ts
+interface MapWidgetProps {
+    onClick: ActionValue<{ lat: Option<Big>, long: Option<Big>, label: Option<string> }>
+}
+
+onClick.execute({
+    lat: new Big(51.907),
+    long: new Big(4.488),
+    label: undefined
+});
+```
+
 ### DynamicValue {#dynamic-value}
 
 `DynamicValue` is used to represent values that can change over time and is used by many property types. It is defined as follows:
@@ -105,7 +121,7 @@ Though the type definition above looks complex, it is fairly simply to use becau
 
 ### EditableValue {#editable-value}
 
-`EditableValue` is used to represent values that can be changed by a pluggable widget client component and is passed only to [attribute properties](/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/#attribute). It is defined as follows:
+`EditableValue` is used to represent values, either an attribute or a variable, that can be changed by a pluggable widget client component and is passed only to [attribute properties](/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/#attribute). It is defined as follows:
 
 ```ts
 export interface EditableValue<T extends AttributeValue> {
@@ -135,15 +151,15 @@ The flag `readOnly` indicates whether a value can actually be edited. It will be
 
 The value can be read from the `value` field and modified using `setValue` function. Note that `setValue` returns nothing and does not guarantee that the value is changed synchronously. But when a change is propagated, a component receives a new prop reflecting the change.
 
-When setting a value, a new value might not satisfy certain validation rules — for example a value might be bigger that the underlying attribute allows. In this case, your change will affect only `value` and `displayValue` received through a prop. Your change will not be propagated to an object’s attribute and will not be visible outside of your component. The component will also receive a validation error text through the `validation` field of `EditableValue`.
+When setting a value, a new value might not satisfy certain validation rules — for example when an attribute is selected and the new value is bigger than the underlying attribute allows. In this case, your change will affect only `value` and `displayValue` received through a prop. Your change will not be propagated to an object’s attribute and will not be visible outside of your component. The component will also receive a validation error text through the `validation` field of `EditableValue`.
 
 It is possible for a component to extend the defined set of validation rules. A new validator — a function that checks a passed value and returns a validation message string if any — can be provided through the `setValidator` function. A component can have only a single custom validator. The Mendix Platform ensures that custom validators are run whenever necessary, for example when a page is being saved by an end-user. It is best practice to call `setValidator` early in a component's lifecycle — specifically in the [componentDidMount](https://en.reactjs.org/docs/react-component.html#componentdidmount) function.
 
-In practice, many client components present values as nicely formatted strings which take locale-specific settings into account. To facilitate such cases `EditableValue` exposes a field `displayValue` formatted version of `value`, and a method `setTextValue` — a version of `setValue` that takes care of parsing. `setTextValue` also validates that a passed value can be parsed and assigns the target attribute’s type. Similarly to `setValue`, a change to an invalid value will not be propagated further that the prop itself, but a `validation` is reported. Note that if a value cannot be parsed, the prop will contain only a `displayValue` string and `value` will become undefined.
+In practice, many client components present values as nicely formatted strings which take locale-specific settings into account. To facilitate such cases `EditableValue` exposes a field `displayValue` which is the formatted version of `value`, and a method `setTextValue` — a version of `setValue` that takes care of parsing. `setTextValue` also validates that a passed value can be parsed and assigned to the target's value type. Similarly to `setValue`, a change to an invalid value will not be propagated further than the prop itself, but a `validation` is reported. Note that if a value cannot be parsed, the prop will contain only a `displayValue` string and `value` will become undefined.
 
 There is a way to use more the convenient `displayValue`  and `setTextValue` while retaining control over the format. A component can use a `setFormatter` method passing a formatter object: an object with `format` and `parse` methods. The Mendix Platform provides a convenient way of creating such objects for simple cases. An existing formatter exposed using a `EditableValue.formatter` field can be modified using its `withConfig` method. For complex cases formatters still can be created manually. A formatter can be reset back to default settings by calling `setFormatter(undefined)`.
 
-The optional field `universe` is used to indicate the set of all possible values that can be passed to a `setValue` if a set is limited. Currently, `universe` is provided only when the edited attribute is of the Boolean or enumeration [types](/refguide/attributes/#type).
+The optional field `universe` is used to indicate the set of all possible values that can be passed to a `setValue` if a set is limited. Currently, `universe` is provided only when the edited value is of the Boolean or enumeration [types](/refguide/attributes/#type).
 
 ### ModifiableValue {#modifiable-value}
 
@@ -192,7 +208,7 @@ It is possible for a component to extend the defined set of validation rules. A
 
 ### IconValue {#icon-value}
 
-`DynamicValue<IconValue>` is used to represent icons: small pictograms in the Mendix Platform. Those can be static or dynamic file- or font-based images. An icon can only be configured through an [icon](/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/#attribute) property. `IconValue` is defined as follows:
+`DynamicValue<IconValue>` is used to represent icons: small pictograms in the Mendix Platform. Those can be static or dynamic file- or font-based images. An icon can only be configured through an [icon](/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/#icon) property. `IconValue` is defined as follows:
 
 ```ts
 interface GlyphIcon {

content/en/docs/apidocs-mxsdk/apidocs/frontend/pluggable-widgets/pluggable-widgets-property-types.md

@@ -134,7 +134,7 @@ Then the Studio Pro UI for the property appears like this:
 
 Integer is represented as a number input in Studio Pro. It is passed as a `number` prop to a client component.
 
-#### XML Attributes
+#### XML Attributes 
 
 | Attribute      | Required | Attribute Type | Description                    |
 |----------------|----------|----------------|--------------------------------|
@@ -477,7 +477,7 @@ If a `dataSource` attribute is not specified, the client will receive an `Action
 
 When a `dataSource` attribute is specified and configured by the user, it is passed as a [`ListActionValue`](/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis-list-values/#listactionvalue). For more information, see the [Datasource](#datasource) section below.
 
-#### XML Attributes
+#### XML Attributes {#xml-attributes}
 
 | Attribute      | Required | Attribute Type | Description                                                                                             |
 |----------------|----------|----------------|---------------------------------------------------------------------------------------------------------|
@@ -487,6 +487,23 @@ When a `dataSource` attribute is specified and configured by the user, it is pas
 | `defaultValue` | No       | String         | Default value for the property, the format should be `<ModuleId>.<DocumentId>`                          |
 | `defaultType`  | No       | String         | Default type for the property, supported values are `None`, `OpenPage`, `CallNanoflow`, `CallMicroflow` |
 
+#### XML Elements {#action-xml-elements}
+
+`<actionVariables>` — Defines variables a widget provides when calling [execute() on an ActionValue](/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis/#execute). The variables are made available in Studio Pro when configuring [Call a Microflow](/refguide/on-click-event/#call-microflow) and [Call a Nanoflow](/refguide/on-click-event/#call-nanoflow) actions.
+
+`<actionVariable>` (required one or more) — Represents a primitive value provided by the widget as an argument when calling `ActionValue.execute()`. The variable is defined by the following attributes:
+* `key` (required) — The identifier of the variable used in Studio Pro and the Pluggable Widgets API.
+* `type` (required) — The type of the value that the variable represents. Supported types and their corresponding Typescript type are listed in the table below.
+* `caption` (required) — A short description of the variable that is displayed in Studio Pro.
+
+| Action Variable Type | Client Type  |
+| -------------------- | --------- |
+| `String`             | `string`  |
+| `Integer`            | `Big`  |
+| `Decimal`            | `Big`  |
+| `DateTime`           | `Date`    |
+| `Boolean`            | `boolean` |
+
 #### Studio Pro UI
 
 When the property is defined as follows:
@@ -502,6 +519,22 @@ Then the Studio Pro UI for the property appears like this:
 
 {{< figure src="/attachments/apidocs-mxsdk/apidocs/pluggable-widgets/pluggable-widgets-property-types/action.png" class="no-border" >}}
 
+When the action exposes variables with the following XML:
+
+```xml
+<property key="actionWithVariable" type="action">
+	<caption>On click</caption>
+	<description>Action to be performed when button is clicked</description>
+	<actionVariables>
+		<actionVariable key="random" type="Decimal" caption="Random number between 0 and 1" />
+	</actionVariables>
+</property>
+```
+
+The variable appears in the UI like this:
+
+{{< figure src="/attachments/apidocs-mxsdk/apidocs/pluggable-widgets/pluggable-widgets-property-types/action-variable.png" class="no-border" >}}
+
 ### Attribute {#attribute}
 
 The attribute property type allows a widget to work directly with entities' attributes, both reading and writing attributes. Depending on the widget's purposes, a widget should define attribute types it supports. 

content/en/docs/appstore/create-content/create-connectors/_index.md

@@ -45,7 +45,7 @@ This chart shows the available solutions for when you want to connect Mendix app
 
 | Category | Solution |
 | --- | --- |
-| Platform-supported protocols | Connect to two or more Mendix applications using platform-supported facilities:<br> SOAP web services (see [Published Web Services](/refguide/published-web-services/) and [Consumed Web Services](/refguide/consumed-web-services/)), REST web services (see [Published REST Services](/refguide/published-rest-service/) and [Consumed REST Services](/refguide/consumed-rest-services/)), OData (see [Published OData Services](/refguide/published-odata-services/) and [Consumed OData Services](/refguide/consumed-odata-services/)), or Catalog (see the [Catalog Guide](/catalog/)). | 
+| Platform-supported protocols | Connect to two or more Mendix applications using platform-supported facilities:<br> SOAP web services (see [Published Web Services](/refguide/published-web-services/) and [Consumed Web Services](/refguide/consumed-web-services/)), REST web services (see [Published REST Services](/refguide/published-rest-service/) and [Consumed REST Service](/refguide/consumed-rest-service/)), OData (see [Published OData Services](/refguide/published-odata-services/) and [Consumed OData Services](/refguide/consumed-odata-services/)), or Catalog (see the [Catalog Guide](/catalog/)). | 
 | Unsupported protocols   | Build a module to connect either with alternative protocols or by encapsulating one of the platform supported protocols. You can do this with [Java actions](/refguide/java-actions/) or [JavaScript actions](/refguide/javascript-actions/).  | 
 
 #### Connecting Mendix Apps to Third-Party Systems