mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
123 lines
6.7 KiB
Markdown
123 lines
6.7 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Dropdown node
|
|
---
|
|
|
|
<##head##>
|
|
|
|
# Dropdown
|
|
|
|
This node places a dropdown input field in the visual tree.
|
|
The input can for example be used to capture information from a user.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The dropdown takes an array of options as an input,
|
|
which will be shown in the dropdown for the user to pick from.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
## The Incoming Items Format
|
|
|
|
The incoming items should be an [Array](/nodes/data/array/array-node) of [Objects](/nodes/data/object/object-node),
|
|
for example coming from a [Static Array](/nodes/data/array/static-array),
|
|
[Query Records](/nodes/data/cloud-data/query-records) or a [Function](/nodes/javascript/function) node.
|
|
|
|
The **Object** should have two mandatory properties: `Label`, `Value` (note that the case matters, `value` would not work). The `Label` property should contain the string to be shown in the **Dropdown**.
|
|
The `Value` property will be set on the output **Value** on the **Dropdown**.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
Depending on how your original data looks, it may be necessary to use the [Array Map](/nodes/data/array/array-map/) node to re-map values in the original data towards `Label` and `Value`.
|
|
One useful pattern is to map the `id` of an **Object** to the `Value` property in the **Array Map** to easily access the selected **Object**.
|
|
The mapping can be achieved through `Value: function (object) { return object.id }`.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<##head##>
|
|
|
|
## Inputs
|
|
|
|
| Data | Description |
|
|
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Items</span> | <##input:item##>This input takes an **Array** of **Objects** that will populate the **Dropdown**. You should make sure that they have the two properties `Label` and `Value` set as they are used to represent the item in the **Dropdown**.<##input##> |
|
|
| <span className="ndl-data">Value</span> | <##input:value##>Setting this input will force the **Dropdown** to select the item with the same value set in its `Value` property.<##input##> |
|
|
| <span className="ndl-data">Placeholder</span> | The placeholder text for when the dropdown is empty. |
|
|
| <span className="ndl-data">Placeholder Opacity</span> | The opacity of the placeholder text. `0` is completely transparent and invisible. `1` is completely solid and opaque. |
|
|
|
|
User interaction can be enabled and disabled:
|
|
|
|
@include "../../shared-props/inputs/_enabled.md"
|
|
|
|
### Visual
|
|
|
|
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
|
|
|
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
|
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
|
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
|
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
|
- [Text Style](/nodes/shared-props/inputs/visual-input-properties/#text-style)
|
|
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
|
- [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style)
|
|
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius)
|
|
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow)
|
|
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
|
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
|
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
|
|
|
## Outputs
|
|
|
|
The main output is the following:
|
|
|
|
| Data | Description |
|
|
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Value</span> | <##output:value##>This output holds the value, i.e. what is in the property `Value` in the currently selected **Object** in the Dropdown.<##output##> |
|
|
|
|
| Signal | Description |
|
|
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Changed</span> | <##output:changed##>This signal signal is emitted when the selection of the **Dropdown** changes.<##output##> |
|
|
|
|
It also features a set of more in depth <span className="ndl-signal">signals</span>:
|
|
|
|
@include "../../shared-props/outputs/_control-events.md"
|
|
|
|
### States
|
|
|
|
Apart from triggering <span className="ndl-signal">signals</span> the Dropdown node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
|
|
|
@include "../../shared-props/outputs/_control-states.md"
|
|
|
|
### Visual
|
|
|
|
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
|
|
|
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
|
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
|
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
|
|
|
<div className="hidden-props-for-editor">
|
|
|
|
@include "../../shared-props/inputs/_visual-input-properties.md"
|
|
|
|
@include "../../shared-props/outputs/_visual-output-properties.md"
|
|
|
|
</div>
|