# Kinetic Control Compendium

**URL:** <https://www.epiusers.help/t/kinetic-control-compendium/105887>\
**Category:** Experts' Corner\
**Tags:** app-studio, kinetic, app-studi, application-studio\
**Created:** [August 9, 2023, 1:39pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887 "2023-08-09T13:39:37Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [September 13, 2023, 1:26pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/61 "2023-09-13T13:26:20Z")

</div>

# Panel Card Grid

So far as I can tell, this is the same as the Grid component.

> [@Kinetic Control Compendium](https://www.epiusers.help/t/kinetic-control-compendium/105887/32):
>
> Grid checkered_flagThe formation of each driver’s starting position at the beginning of the ra-- …ope, nope. Not that one. Expandable container that displays a grid and allows interaction with the grid using additional components in the panel card header. Property Group Property Description Basic Id Unique identifier for the control Basic Label Text Sets the Title of the grid found on the Panel Header. (Fig. A) Behavior On Panel Card Expand Hook into an event which occ…

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [September 13, 2023, 1:46pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/62 "2023-09-13T13:46:03Z")

</div>

# Part Rev Description

Allows a user to configure Part, Revision, and Description controls in a single, grouped widget.

 ![image](https://www.epiusers.help/uploads/default/original/3X/e/0/e0e6856d0ebcd9a2f0511598f2c7e9f10b7f7277.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Label Part | Sets the label within the control for the Part. (Fig. A) |
| Basic | Label Revision | Sets the label within the control for the Rev. (Fig. A) |
| Basic | Label Description | Sets the label within the control for the Desc. (Fig. A) |
| Behavior | On Search Click | Allows you to create an event when the search is clicked. This will override the base part search wired to this control. You will need to define the search params and bind the values manually. |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. B) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. This will not display any data in the binding, but can be used to control the… control, lol. For example, you can use the EpBinding for OnClick events or Row Rules, etc. |
| Data | EpBinding PartNum | Binding to store the part number. Format: DataView.Column. |
| Data | EpBinding RevisionNum | Binding to store the revision num. Format: DataView.Column. |
| Data | EpBinding PartDesc | Binding to store the part description. Format: DataView.Column. Have the parts on my desc by noon. |
| Data | Allow Custom | Allows for a custom value to be entered into the Rev. |
| Layout | Alignment | 🔎 Sets the alignment for the control. Does not work. |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |

**Figure A: Label Texts**

 ![image](https://www.epiusers.help/uploads/default/original/3X/b/0/b06c3af19c8c97b5cecb64729efc75773f5a1274.png)

**Figure B: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/7/17512546c53b322a85b65ed8997956c6541f7c19.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [September 13, 2023, 4:03pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/63 "2023-09-13T16:03:01Z")

</div>

# Picture Box

Allows a user to display a picture from various sources.

(Yes–the logo is old. Was the first image I found and was too lazy to find another!)

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/2/62e551c0cf73e07acf5e3ec25203fde9fc038324.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Label Text | 🔎 Sets the label within the control. Doesn’t do anything. |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. |
| Layout | Width | Sets the specific width (pixels) for the control. (Fig. B) |
| Layout | Height | Sets the specific height (pixels) for the control. (Fig. B) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| Advanced | Image Fill Type | Sets the type for the img tag to render. Valid options include: imageBlob, url, iconClass, fileStore. (Fig. C) |
| Advanced | Image Style | 🔎 Sets the image style. Valid options include: None\*, Circle, and Rounded Corners. Note, that if you select Circle or Rounded Corners, there’s no going back to None. You will need to delete the Picture Box and make a new one. (Fig. D) |
| Advanced | Hide Border | Check this to hide the border. This will also make the image fill the shape of where the border used to be. (Fig. E) |
| Advanced | Image Fill Type | Set the fill type. Zoom will zoom the image to fill all available space. Fit shows the whole image and leaves unused space blank. (Fig. F) |
| Advanced | Image | Set the source of the image. For imageBlob and fileStore, these will be bindings such as Image.ImageContent and Image.ImageSysRowID respectively. Url will hold, well, a URL. The classIcon type will be in the format of “mdi mdi-name” Example: `mdi mdi-shark-off`. Please put your phone in shark mode while on the boat. Thank you. Whatever data ends up here is what will show up in the binding. Alternatively, you can leave this blank and push the data into whatever the control is bound to. |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/e/c/ec9655297976a91e22c95ad5cd68a26b49aeba5d.png)

**Figure B: Dimensions**

 ![image](https://www.epiusers.help/uploads/default/original/3X/b/a/ba2a6b7a3be5857c637743c4fb15783d720fc0d6.png)

**Figure C: Image Fill Type**

 ![image](https://www.epiusers.help/uploads/default/original/3X/5/6/566f219c7bd06fdf994efa1ebb58a774c5bfd12b.png)

**Figure D: Image Style**

 ![image](https://www.epiusers.help/uploads/default/original/3X/d/8/d8e6518eebcc19cd2543db38e7f325c022aed0e1.jpeg)

**Figure E: Hide Border**

 ![image](https://www.epiusers.help/uploads/default/original/3X/a/f/afa202555d9f81fcc10a95891fe07500aeb4297c.jpeg)

**Figure F: Image Fill Type**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/1/c1d7637ba9750f651e2657a9ded508e98f3e9ba7.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 16, 2023, 3:25pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/64 "2023-10-16T15:25:24Z")

</div>

# Quantity UOM

This control is a combination of a numeric box and combo combined into one control.

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/c/0cc7495802ef2c49e1d5b218d58f72d4171ae972.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. |
| Data \> Quantity Model \> Basic | Qty Label Text | Sets the label for the quantity portion of the control. (Fig. B) |
| Data \> Quantity Model \> Data | Qty EpBinding | Sets the data binding for the quantity potion of the control. Format is DataView.Column. |
| Data \> Quantity Model \> Advanced | All Properties | [These are reviewed in the advanced section of the numeric control](https://www.epiusers.help/t/kinetic-control-compendium/105887/42) |
| Data \> Combo Model \> Basic | Combo Label Text | Sets the label of the combo portion of the control. (Fig C.) |
| Data \> Combo Model \> Data | EpBinding Text Column | 🔎 Defines the column to get the label text value from, at least it’s supposed to. Narrator: It does not. |
| Data \> Combo Model \> Data | Combo EpBinding | Sets the data binding for the combo potion of the control. Format is DataView.Column. |
| Data \> Combo Model \> Reusable Combo | All Properties | Nothing needs to be set here. It pulls in the UOMs by default by using some unknown magic; it has some preset filters, but no known datasource. #Shrug [If you care to override it, review the Reuseable Combo section of the Combo control here.](https://www.epiusers.help/t/kinetic-control-compendium/105887/8) |
| Data \> Combo Model \> Advanced | All Properties | Nothing needs to be set here. It pulls in the UOMs by default by using some unknown magic; it has some preset filters, but no known datasource. #Shrug [If you care to override it, review the Reuseable Combo section of the Combo control here.](https://www.epiusers.help/t/kinetic-control-compendium/105887/8) |
| Layout | Alignment | 🔎 Sets the alignment of the control. Does not seem to work. |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| — | — | — |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/7/6/765e91bacb2e9d70dbb6fb1b9b5b992db381b2a6.png)

**Figure B: Qty Label Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/3/2/322457e7411234d6e29a15ebc907a6dd0cdc82d0.png)

**Figure C: Combo Label Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/3/a/3af4e438643d7710feb1b698ac8b4db99316371e.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 16, 2023, 4:38pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/65 "2023-10-16T16:38:00Z")

</div>

# Radio Button

Allows a user to choose only one of a predefined set of mutually exclusive options.

 ![image](https://www.epiusers.help/uploads/default/original/3X/e/d/ed84ce1f8200041ae2bd53fad93bc8ea55d64a77.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. |
| Layout | Width | Sets the specific width (pixels) for the control. (Fig. B) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |
| State | Highlight Selected | Emboldens the label of the selected item. (Fig. C) |
| Advanced | Value Field | Defines what data object to use for the value. Options include value and label |
| Advanced | Label Field | Defines what data object to use for the label. Options include value and label |
| Advanced | Vertical Align | Sets the radio buttons vertically. (Fig. D) |
| Advanced \> Data | Label | Set the label text for the radio option. (Fig. E) |
| Advanced \> Data | Value | Set the value for the radio option. (Fig. F) |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/9/c9839465f3fe95c0d19a4dda3d24ec8464472b20.png)

**Figure B: Width**

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/1/11036ee049f44dc5b05fca146e943c6ddf4e9b89.png)

**Figure C: Highlight Selected**

 ![image](https://www.epiusers.help/uploads/default/original/3X/2/b/2bba24a5ddb15c92bd422c55facd01f9613c6bd7.png)

**Figure D: Vertical Align**

 ![image](https://www.epiusers.help/uploads/default/original/3X/5/b/5b71b04624bb390cd98883ca9d349de3cabdb58c.png)

**Figure E: Label**

 ![image](https://www.epiusers.help/uploads/default/original/3X/f/6/f694f3830285d65a57d1095c7e90cb5bbc571d0e.png)

**Figure F: Value**

 ![image](https://www.epiusers.help/uploads/default/original/3X/a/e/aed57abfe0bddde0e45b22c4b8606028a3666d22.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 16, 2023, 8:44pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/66 "2023-10-16T20:44:47Z")

</div>

# Panel Card Stack

Expandable container that can hold multiple panels in a tabular fashion.

 ![image](https://www.epiusers.help/uploads/default/original/3X/d/3/d394219a4591b3cf1b7b5cec35875b14574fb7df.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Title | 🔎 Set the title that is displayed at the top of the panel card. Doesn’t work. |
| Basic \> Panels | | Select the panels to include in your stack. You can also reorder them here. (Fig. A) |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. B) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. This will not display any data in the binding, but can be used to control the… control, lol. For example, you can use the EpBinding for OnClick events or Row |
| Layout | Minimum Width | Sets the minimum width the panel can shrink to when the page is in Flex Layout Mode. (Fig. C) |
| Data | Flex Layout | To create custom, responsive control layouts instead of column-based layouts, set the card to Flex Layout Mode and use Group Box and Flex Container controls within the card to organize content. |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| Advanced | Auto Fill Container | 🔎 Indicate if panel card should automatically fill its container. Doesn’t seem to have an effect on this control. |
| Advanced | Expand At Runtime | Enable this to expand the panel card at runtime. When the panel is expanded, it attempts to load data from the provider model. In the case of a dashboard, you may want to disable this to allow users time to fill in the filters. |

**Figure A: Panels**

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/d/0d13959fbe379e79587c83bea36d03d8be05f645.png)

**Figure B: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/9/3/9352de2e68d0f937b648163fe6e5775acba13da0.png)

**Figure C: Minimum Width**  
Don’t y’all just loooove how uneven this looks. I know I do!

 ![image](https://www.epiusers.help/uploads/default/original/3X/d/5/d5aaacc1666f94bbd102a596687daf3565acaa10.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 17, 2023, 3:54pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/67 "2023-10-17T15:54:35Z")

</div>

# Relationship Map

A component to define a relationship map.

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/7/07e9646e75c45a01bac0950ddd5292515dc479d8.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. |
| Layout | Alignment | Sets the alignment for the control. Valid options include Right, Left, Center. (Fig. B) |
| Layout | Width | 🔎 Sets the specific width (pixels) for the control. Doesn’t work. |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |
| Advanced | Header Text | Sets the header text on the panel. (Fig. C) |
| Advanced | Svc | The service to fetch the diagram data. Example: `Erp.BO.SalesOrderSvc` |
| Advanced | Svc Path | The service path to get the diagram data. Example: `GetSalesOrderRelationshipMap` **Note** : I don’t have a list of services that have a relationship map call. |
| Advanced | Input Arguments | Arguments to be provided to the service, one of which includes the key field. Outside of the two shown, I’m not sure what else can be provided here. (Fig. D) |
| Advanced | Cap Width | 🔎 No idea what this should do. |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/f/d/fd496f6863e54c5c5028b3ec66df79aab32f8cb2.png)

**Figure B: Alignment**

 ![image](https://www.epiusers.help/uploads/default/original/3X/4/6/466418b9e6dc552ac173c140ecdbf37469b34b29.png)

**Figure C: Header Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/2/125e468882ff16869f4de6f38004b12e371c2dc9.png)

**Figure D: Input Arguments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/0/100049165872af686962b17bc8c0d52e76cb6412.png)

---

<div class="post-metadata">

**Author:** ![Mark\_Wonsil](https://www.epiusers.help/user_avatar/www.epiusers.help/mark_wonsil/32/51594_2.png) [@Mark\_Wonsil](https://www.epiusers.help/u/Mark_Wonsil)\
**Post date:** [October 17, 2023, 3:58pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/68 "2023-10-17T15:58:03Z")

</div>

Is this what the new Explorers use?

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 17, 2023, 3:59pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/69 "2023-10-17T15:59:03Z")

</div>

Just Dora.

---

<div class="post-metadata">

**Author:** ![Mark\_Wonsil](https://www.epiusers.help/user_avatar/www.epiusers.help/mark_wonsil/32/51594_2.png) [@Mark\_Wonsil](https://www.epiusers.help/u/Mark_Wonsil)\
**Post date:** [October 17, 2023, 3:59pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/70 "2023-10-17T15:59:47Z")

</div>

![Well Done Thank You GIF by Spotify](https://media1.giphy.com/media/lvOnlEYunAwOkHjgmU/giphy.webp?cid=e90edba35f88lan1544y0tyt2uaiwakdcaa3ervbuu2cj0gi&ep=v1_gifs_search&rid=giphy.webp&ct=g)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 17, 2023, 6:55pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/71 "2023-10-17T18:55:21Z")

</div>

# Rich Text Editor

Allows a user to enter text and images which could be formatted according to their preferences… Unless that preference is the color red… or purple. 🤔 Plenty of choices for blue, though!

 ![image](https://www.epiusers.help/uploads/default/original/3X/2/8/283deb23fa9d100705e7844ca9903b461bcdbf1b.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Label Text | 🔎 Sets the label within the control. Doesn’t do anything. |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. Turns out you can get red text here, or any color, but it’s stuuuuupid; you just need to change the hex value. (Fig. B) |
| Layout | Alignment | Sets the alignment of the control. (Fig. C) |
| Layout | Width | Sets the specific width (pixels) for the control. (Fig. D) |
| Layout | Height | Sets the specific height (pixels) for the control. (Fig. D) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |
| Advanced | Show All Tools | Toggle to show or hide advanced tools for the control. (Fig. E) |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/2/0/2013dffdeffc689d52bac9820663c76bf0b00acd.png)

**Figure B: EpBinding**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/a/ca2a51232fea4bfee6188789c7ede9875a2041e6.png)

**Figure C: Alignment**

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/7/675b3df6d8280d90da36d729f96b3d6adb7a83db.png)

**Figure D: Width and Height**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/b/cbc217e5580f65bf85adf3bf6b1c30ad7510dc23.png)

**Figure E: Show All Tools**

 ![image](https://www.epiusers.help/uploads/default/original/3X/a/0/a06f8482b4b5b86b906b988def32ebb7888e7317.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 17, 2023, 8:32pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/72 "2023-10-17T20:32:14Z")

</div>

# Row Navigator

Row Navigator scrubs among the records in a DataView that might be linked to an EpBinding component on the target page/panel to display the current record details or to a grid.

 ![image](https://www.epiusers.help/uploads/default/original/3X/5/a/5a1878f29b9800566abb63d5e7f36f655274c4d3.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Label Text | Sets the label within the control. (Fig. A) |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. B) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView. This won’t show data, but is the source for the nav combo. |
| Layout | Alignment | Marginally sets the alignment for the control. (Fig. C) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| Advanced | CombBox Label | The label shown in the combo box portion of the control. (Fig. D) |
| Advanced | Show Count Text | Shows the a count of the records within the view. (Fig. E) |
| Advanced | Columns | 🔎 The columns to show in the combo. Supposedly, this is supposed to work with multiple columns, but I can only get it to show data from the first one. (Fig. F) |

**Figure A: Label Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/7/a/7a7b4efcc9fb070d957e7898731c899a0472fcdb.png)

**Figure B: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/b/c/bc16eededee187935a219c16a1b2be4f1f4c5e9a.png)

**Figure C: Alignment**

 ![image](https://www.epiusers.help/uploads/default/original/3X/a/d/ad47fdbdd970746800f91a274b9591d31f324cfe.png)

**Figure D: ComboBox Label**

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/a/6a4650652e2d2b0ce91cc02fbb681b6b7f330cc6.png)

**Figure E: Show Count Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/3/8/38d32e5363c880bae39f77376e9e5e236c5c5055.png)

**Figure F: Columns**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/a/ca9ca57a7e0385e1f3771bb5433d88d6d040dfb4.png)

---

<div class="post-metadata">

**Author:** ![rad.russ15](https://www.epiusers.help/user_avatar/www.epiusers.help/rad.russ15/32/31617_2.png) [@rad.russ15](https://www.epiusers.help/u/rad.russ15)\
**Post date:** [October 25, 2023, 5:33pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/73 "2023-10-25T17:33:32Z")

</div>

Anyone figured out a way to expand the width of this control? It cuts off our part numbers and descriptions.

---

<div class="post-metadata">

**Author:** ![jkane](https://www.epiusers.help/user_avatar/www.epiusers.help/jkane/32/57624_2.png) [@jkane](https://www.epiusers.help/u/jkane)\
**Post date:** [October 25, 2023, 6:21pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/74 "2023-10-25T18:21:46Z")

</div>

Is there an ability to do one to many? I’m thinking of a Lot that gets issued to multiple Jobs.

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 25, 2023, 6:23pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/75 "2023-10-25T18:23:44Z")

</div>

> [@jkane](#):
>
> Is there an ability to do one to many?

It visualizes whatever the dataset is that comes back from the BO, but yes–I’ve seen it visualize 3 invoices to 1 order for instance. That’s automatic, though you should probably increase the maxNumOfCards to suit your needs.

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 25, 2023, 6:27pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/76 "2023-10-25T18:27:23Z")

</div>

> [@rad.russ15](#):
>
> Anyone figured out a way to expand the width of this control?

Create an event that’s triggered off of the OnCreate behavior and set the width property with a property-set widget.

 ![image](https://www.epiusers.help/uploads/default/original/3X/e/9/e95a03609c83239409f954361680b788fc138dcb.png)

 ![image](https://www.epiusers.help/uploads/default/original/3X/3/0/30e70f38afdba628061facc28e3e114447313a30.png)

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/2/12336072795d47ae343ba5ae48c1c8a937ec00e2.png)

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/7/0767f21cc4d45485fc2b2b471f81d59126f67b3e.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 25, 2023, 7:47pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/77 "2023-10-25T19:47:53Z")

</div>

# Scheduler

The scheduler component provides options for scheduling and displaying events in different views for a user. See the appendix for some necessary events to make this work.

I forgot to click the different views at the top and was too lazy to re-record it.  
You get what you get!

![Scheduler](https://www.epiusers.help/uploads/default/original/3X/8/8/88f83f2de43e7f05a58ed96d76e36cd725ecd586.gif)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. Not really relevant for this control. |
| Data | EpBinding | Bind the control to a DataView. This is the DataView it will look to when specifying the upcoming columns. |
| Data \> Column Bindings | Event Id Column | This is the unique identifier for the event. Generating a GUID would be ideal for this. I used the current dateTime because that’s what Epicor did. (Fig. B) |
| Data \> Column Bindings | Event Start Date Column | The column that holds the start date (and time!) (Fig. B) |
| Data \> Column Bindings | Event End Date Column | The column that holds the end date (and time!) (Fig. B) |
| Data \> Column Bindings | Event Title Column | The column that holds the title label for the event. (Fig. B) |
| Data \> Column Bindings | Event Description Column | The column that holds the description. (Fig. B) |
| Data \> Column Bindings | All Day Event Column | The column that holds a boolean for if it’s an [all day](https://youtu.be/O42Wo42YhWk?si=ZrCmLtVhwx1vf10e&t=42) event or not. (Fig. B) |
| Data \> Editable | Select this to enable editing of events once created, including additional options for reoccurring and whatnot. (Fig. C) | |
| Layout | Width | Sets the specific width (pixels) for the control. (Fig. D) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| Advanced | Disable Day View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable MultiDay View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable Week View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable Work Week View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable Month View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable Timeline View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable Timeline Week View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Disable Agenda View | Removes the option to select this view from the top of the scheduler. (Fig. E) |
| Advanced | Show Work Hours | If set to true, the view will be initially shown in the business hours mode. By default, the view is displayed in the full-day mode. Applicable for the Day, Week, and Timeline Views. When Enabled, it also displays two, new properties called Work Start Time and Work End Time to define the working hours. (Fig. F) |
| Advanced | Enable Export to PDF | Shows a button that enables a user to export the view currently displayed to a PDF (Fig. G) |
| Advanced | Number of Days | Number of days to show in the MultiDay view. (Fig. H) |
| Advanced | Work Start Time | EpBinding to define the start time for the work day (it’s a string…🙄) Format: DataView.Column (Fig. I) |
| Advanced | Work End Time | EpBinding to define the end time for the work day (it’s a string…🙄) Format: DataView.Column (Fig. I) |
| Advanced | Selected Date | EpBinding for the selected date. Format: DataView.Column. (Fig. J) |
| Advanced | Number of hours to be displayed | Specifies the number of hours that the view will render. Applicable for the Day, MultiDay, WorkWeek, and Week Views. (Fig. K) |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/7/0/70dfcfed84618f0e5f8c9c7369bc5392451d65f8.png)

**Figure B: Column Bindings**  
Remember, these come from whatever DataView you specified in the Data \> EpBinding

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/9/69a9c1bdf979082cde97c22e292234d606b132df.png)

**Figure C: Editable**  
Probably should add some condition to the double click event, but I’m too lazy. I’m sure y’all can figure that but out.  
 ![SchedulerEdit](https://www.epiusers.help/uploads/default/original/3X/2/7/278c0c1ecf492f107e8160086b2fdfc616907fad.gif)

**Figure D: Width**

 ![image](https://www.epiusers.help/uploads/default/original/3X/9/3/9372694845a6e9f05ec25f456fa400a70d7c9eef.png)

**Figure E: Disable Views**

 ![image](https://www.epiusers.help/uploads/default/original/3X/f/1/f17bad80b8a871e1f608ff13a0943f16825551a2.png)

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/3/c3faa5fad3e39c5f1641e98b2f321cc72da15b9d.png)

**Figure E: Show Work Hours**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/4/c4b75e5e979011ed6b98c1fba1a95990ee1d95c5.png)

 ![image](https://www.epiusers.help/uploads/default/original/3X/8/d/8d4ce399b0cfb4abf018ffdd8d1a1ec915c63866.png)

**Figure G: Enable Export PDF**

 ![image](https://www.epiusers.help/uploads/default/original/3X/7/6/7662d8df051f1a32750fccd70eda768f83e8372f.png)

**Figure H: Number of Days**

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/4/0444ddb3b0c4ed4cd7f2fa0fcbdb9991de0d7d86.png)

**Figure I: Work Start and End Times**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/2/c280bb8abfa8793f0ea3b75bf160a5c21cf26efb.png)

**Figure J: Selected Date**

 ![image](https://www.epiusers.help/uploads/default/original/3X/2/3/23691dbea77a9c4c7c6f5797c5ff8163eaadf5e0.png)

**Figure K: Number of hours to be displayed**

 ![image](https://www.epiusers.help/uploads/default/original/3X/5/e/5ecab0a2ad47cab278e1481ab545c9954df20b20.png)

* * *

# Appendix

## DataViews

Create a dataview to hold the column bindings and to bind your grid to.

 ![image](https://www.epiusers.help/uploads/default/original/3X/8/0/801251f07212e52b7cbbbaa58534faecf8f55a15.png)

## Slider

Create a slider or some other method for data input. All fields in the slider are bound to the “TransView” variation of the previous dataview. For instance, cdv\_Calander.StartDate = TransView.StartDate on the slider. Don’t bind them to the cdv\_Calander or it will create records upon opening.

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/e/6e836bebcced4e5e6d874de977343bb516229dc5.png)

Don’t forget to add some buttons. (Delete is unnecessary if you make the Scheduler editable)

 ![image](https://www.epiusers.help/uploads/default/original/3X/7/7/771519c1c9d6337f9ea6370c0d8824bf51fd70bd.png)

## Events

**ce\_calendar\_onDoubleClick**  
Double click event to add a new item to the calendar. This initializes the TransView fields and then opens the slider.

 ![image](https://www.epiusers.help/uploads/default/original/3X/d/1/d122fddd0c37c43091ff96e0294bab36bc8fecde.png)

I had to do some JS magic to get the fields to do what I wanted.  
Here are each of the row-update items:

**EpBinding** : TransView.StartDate  
**Expression** : `new Date(new Date("%startDateTime%").setHours(0,0,0,0))`  
**Notes** : %startDateTime% is a built-in variable that will get the start date and time from the scheduler when you double click. For instance, if you click 10/14/2023 @ 1:00AM, the variable will yield `2023-10-14T01:00:00Z` (24 hour time). The `setHours(0,0,0,0)` is to zero out the time and only provide the date since I’m setting the time in a different control.

**EpBinding** : TransView.StartTime  
**Expression** : `(new Date("%startDateTime%").getHours() * 3600) + (new Date("%startDateTime%").getMinutes() * 60) + (new Date("%startDateTime%").getSeconds())`  
**Notes** : This is converting the hours, minutes, and seconds into a seconds from midnight value.

**EpBinding** : TransView.EndDate  
**Expression** : `new Date(new Date("%endDateTime%").setHours(0,0,0,0))`  
**Notes** : %endDateTime% is a built-in variable that will get the end date and time in 30 minute increments from the scheduler when you double click. For instance, if you click 10/14/2023 @ 1:00AM, the variable will yield `2023-10-14T01:30:00Z` (24 hour time). The `setHours(0,0,0,0)` is to zero out the time and only provide the date since I’m setting the time in a different control.

**EpBinding** : TransView.EndTime  
**Expression** : `(new Date("%endDateTime%").getHours() * 3600) + (new Date("%endDateTime%").getMinutes() * 60) + (new Date("%endDateTime%").getSeconds())`  
**Notes** : This is converting the hours, minutes, and seconds into a seconds from midnight value.

**EpBinding** : TransView.AllDay  
**Value** : `false`

**EpBinding** : TransView.Description  
**Value** : `""`

**EpBinding** : TransView.ExceptionLabel  
**Value** : `"Say Words"`

**EpBinding** : TransView.StartDateTime  
**Value** : `"%startDateTime%"`  
**Notes** : This is my unique ID for column binding. Again, might be better to use a GUID, but I just followed what Epicor did and it seems to work fine.

**ce\_SliderOK**  
This event adds the new records to the dataview and subsequently adds the visual to the calendar.

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/8/08df84c4b34c17338acce9341d49a916ae11901e.png)

Again, some more JS magic for the **row-update**.

**EpBinding** : TransView.StartDate  
**Expression** : `new Date((new Date("{TransView.StartDate}")).setSeconds((new Date("{TransView.StartDate}")).getSeconds() + {TransView.StartTime}));`  
**Notes** : This is adding the seconds from the time control to the date control.

**EpBinding** : TransView.EndDate  
**Expression** : `new Date((new Date("{TransView.EndDate}")).setSeconds((new Date("{TransView.EndDate}")).getSeconds() + {TransView.EndTime}));`  
**Notes** : This is adding the seconds from the time control to the date control.

**row-add**  
**DataView** : cdv\_Calander (or whatever yours is called)  
**Values** :

```auto
{
	"ExceptionLabel": "{TransView.ExceptionLabel}",
	"ModifiedDay": "{TransView.StartDateTime}",
	"AllDay": "{TransView.AllDay}",
	"Description": "{TransView.Description}",
	"StartDate": "{TransView.StartDate}",
	"EndDate": "{TransView.EndDate}"
}

```

**ce\_SliderCancel**  
Just closes the slider without modifying data.

 ![image](https://www.epiusers.help/uploads/default/original/3X/4/f/4f731c3ffe33f57bc73c2ba4c80f04f4fc09fab0.png)

**ce\_SliderDelete**  
Again, this is unnecessary with the editable button, but here it is for demonstration purposes.

 ![image](https://www.epiusers.help/uploads/default/original/3X/7/b/7b810dad20c5d51c8b3a99223dc96505f5234aa2.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 26, 2023, 2:38pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/78 "2023-10-26T14:38:06Z")

</div>

# Search Chip Selector

Allows a user to search and display selected items as chips.

![SearchChips](https://www.epiusers.help/uploads/default/original/3X/c/1/c1c060f7308ea8b469f5704fbfe0a68d03ed8d63.gif)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Title | 🔎 Set the title that is displayed at the top of the panel card. ??? Panel card? This doesn’t work. |
| Behavior | On Search Click | Click this to create an OnSearchClick event for the control. You will need to wire the search up yourself and use a dataview-condition (or function) in the event to concat each value selected. |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. The value of this binding needs to be a tilde delimited string. Item1~Item1~Item3. |
| Layout | Alignment | Sets the alignment of the control. (Fig. B) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |
| Advanced | Plural Label Text | Sets the label text when multiple chips are selected. |
| Advanced | Singular Label Text | Sets the label text when a single chip is selected. |
| Advanced | Set the label text when no chip is selected. | |
| Advanced | Error Message Text | Sets the chip validation error message. |
| Advanced \> MultiField Bindings | EpBinding | Set the data binding using format DataView.Column. This will allow you to display multiple values on the chip. For each chip, it will display the first item in binding 1 followed by the first item in binding 2… etc. (Fig. C) |
| Advanced \> MultiField Bindings | Display Value | 🔎 Sets the above epBinding as the chip label. I didn’t notice this doing anything. |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/3/63a1a1061e2f5f72874c4d5fd74e0b5971c839d5.png)

**Figure B: Alignment**

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/4/04bfe9ba2fb3097cf2f12c28a16d0f13d2f497ea.png)

**Figure C: MultiField Binding**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/8/c82758aaaa852cf4f22e60ed0958dc225a356141.png)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 26, 2023, 4:50pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/79 "2023-10-26T16:50:25Z")

</div>

# Selection List

Allows a user to select and sort a collection of data items.

This control has a few different flavors to it and can be changed up visually in a number of different ways.

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/7/170c20fc197f5fb4293b4dfc746d1e950d67c77a.png)

 ![image](https://www.epiusers.help/uploads/default/original/3X/9/2/92bc95612f9133bfc0623a81dbcf379a2eee4236.png)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Basic | Label Text | Sets the label within the control. (Fig. A) |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. B) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. Not relevant to this control. |
| Data | EpBinding | Bind the control to a DataView.Column. This is used to store the delimited list of items. Can be used to apply row rules to the control. |
| Data | List | This can be used to define hard coded items for the list instead of a dataview. |
| Data \> List | Id | Unique ID for the item. (Fig. C) |
| Data \> List | Text | Set the text value for the item (Fig. C) |
| Data \> List | Id Name | 🔎 Obsolete |
| Data \> List | Description | Set the detailed description for the item (Fig. C) |
| Data \> List | SubText | 🔎 Set the sub-text value for the item. Doesn’t seem to do anything. |
| Data \> List | LeftIcon | 🔎 Set the icon for the list item. Doesn’t seem to do anything. |
| Data \> List | Command | 🔎 Set the command string for the list item. No clue here. |
| Data \> List | Selected | Set the flag to indicated if the item is selected by default. (Fig. C) |
| Data \> List | Checkmark Hidden | Set the flag to indicate if the selected item has a hidden checkmark. Seems weird, but okay. (Fig. C) |
| Data \> List | Toggle Disabled | Set the flag to indicate if the item is disabled. This works, as in you cannot select it, but there’s no visual indicator to indicate that. (Fig. C) |
| Data \> List | Required | Set the flag to require this list item. (Fig. C) |
| Data \> List | Bookmark | 🔎 Set the flag indicating the list item has a bookmark. #Shrug |
| Dataviews | Source View Name | Set the view name used to populated the source list. Format: DataView |
| Dataviews | Source Table Name | 🔎 Set the table name used to populate the source list. Unsure on this one. It’s not clear what a table is within the context of App Studio. |
| Dataviews | Source Code Col | Column name used to populate the source list item ID. Format: ColumnName |
| Dataviews | Source Desc Col | Column name used to populate the source list item description. Format: ColumnName |
| Dataviews | Target View Name | Set the view name used to populated the targetlist. Format: DataView |
| Dataviews | Target Table Name | 🔎 Set the table name used to populate the target list. Unsure on this one. It’s not clear what a table is within the context of App Studio. |
| Dataviews | Target Code Col | Column name used to populate the target list item ID. Format: ColumnName |
| Dataviews | Target Desc Col | 🔎 Column name used to populate the target list item description. It yells at you in Dev Tools if you populate this. Format: ColumnName |
| Dataviews | Table Name | Set the table name used with source AND target codes and descriptions |
| Dataviews | Parent Related Col | Set the name of the column on the parent table. Used when binding to parent/child related tables. |
| Dataviews | Child Related Col | Set the name of the column on the child table. Used when binding to parent/child related tables. |
| Dataviews | Related Col | Set the shared name of the column on both the parent and child tables. Used when binding to parent/child related tables. |
| Layout | Alignment | Sets the alignment of the control. (Fig. D) |
| Layout | Width | Sets the specific width (pixels) for the control. (Fig. E) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| State | Auto Focus | When enabled, the control is automatically focused on creation. |
| Advanced | Target Label Text | Set the label text for the target list. (Fig. F) |
| Advanced | Mode Type | Set the display mode. Valid options include: Single and Dual. (Fig. G) |
| Advanced | UI Mode | Set the selection mode. Valid options include: Select, Switch, 🔎 SingleSelect (Doesn’t really stop you), Checkbox. (Fig. H) |
| Advanced | Position Mode | Set the position of the text. Valid Options Include: Left or Right (Fig. I) |
| Advanced | Reorder | Set the reorder mode. Valid Options Include: Select or All (Fig. J) |
| Advanced | Header | 🔎 Sets the label text for the list. Only used on Panel Mode. Not sure what panel mode is, but it ain’t this! |
| Advanced | Limit | 🔎 Sets the limit of the items to be displayed. Only used on Panel Mode. Not sure what panel mode is, but it ain’t this! |
| Advanced | Rows | Sets the number of items to be displayed (can scroll for more). Used in all modes except Panel. (Fig. K) |
| Advanced | Manual Sort | 🔎 Sets the flag indicating if a sort button should be shown. Doesn’t do anything. Might be only for “Panel Mode” |
| Advanced | Show Edit | 🔎 Set the flag indicating if an edit button should be shown. Only for Panel Mode. WTF IS PANEL MODE?? |
| Advanced | Enable Edit | 🔎 Set the flag indicating if editing of list items is allowed. Only used on… you guess it… Panel Mode. |
| Advanced | Enable Header Edit | 🔎 Sets the flag indicating if the edit button should be presented at the top of the list. OnLy UsEd In PaNeL mOdE. |
| Advanced | Value Primitive | 🔎 Specify the type of the selected value. If set to true, the selected value has to be of a primitive value. |
| Advanced | Delimited | Set the flag indicating if the multi-select value for binding is delimited. This is required for multi select. |
| Advanced | Delimiter | Set the delimiter character. Valid options include: ~ , ` (tilde, comma, tick). |
| Advanced | EpiLabel | 🔎 Obsolete |
| Advanced | Draggable | 🔎 Obsolete |

**Figure A: Label Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/d/6d2285225523473679b4c3e1733fcff3e527ecd2.png)

**Figure B: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/c/3/c312d38a301b915bf927da036a7af1e90ecb9d95.png)

**Figure C: Items**

 ![image](https://www.epiusers.help/uploads/default/original/3X/f/9/f9995bc038b6b93543380082e68974c5346ff5b5.png)

**Figure D: Alignment**

 ![image](https://www.epiusers.help/uploads/default/original/3X/4/0/4095f49562dc7204a803b9c609592a95fb32f6f7.png)

**Figure E: Width**

 ![image](https://www.epiusers.help/uploads/default/original/3X/a/b/ab06e90e59b9e7ba3de65bb7cb3c99f871e2a237.png)

**Figure F: Target Label Text**

 ![image](https://www.epiusers.help/uploads/default/original/3X/6/2/62359d21aa37085cdf0c3c46bcd8fce86844e315.png)

**Figure G: Mode Type**

 ![image](https://www.epiusers.help/uploads/default/original/3X/f/5/f55be826dfe83842f3a9f53c39c15876aad12ea1.png)

**Figure H: UI Mode**

 ![image](https://www.epiusers.help/uploads/default/original/3X/0/5/05555ac3f04cab045fc233cebddc1ccd9e079e14.png)

**Figure I: Position Mode**

 ![image](https://www.epiusers.help/uploads/default/original/3X/5/d/5dfedf9e546c6c2aa1802f4c9ff26a2f03074e90.png)

**Figure J: Reorder**

 ![image](https://www.epiusers.help/uploads/default/original/3X/e/5/e5e5cb301986d3097d34207a97fb6d0efcb20ff3.png)

**Figure K : Rows**

 ![image](https://www.epiusers.help/uploads/default/original/3X/1/6/168f2b07e11b741b20000d680c7aa3993f7790a3.png)

* * *

More info on setup from an older post: [How To: Kinetic Selectable List](https://www.epiusers.help/t/how-to-kinetic-selectable-list/83560)

---

<div class="post-metadata">

**Author:** ![hmwillett](https://www.epiusers.help/user_avatar/www.epiusers.help/hmwillett/32/93207_2.png) [@hmwillett](https://www.epiusers.help/u/hmwillett)\
**Post date:** [October 26, 2023, 7:18pm UTC](https://www.epiusers.help/t/kinetic-control-compendium/105887/80 "2023-10-26T19:18:15Z")

</div>

# Shape [of you?]

Allows a user to customize a color and shape based on different statuses.

![ShapeOfYou](https://www.epiusers.help/uploads/default/original/3X/0/3/03a4c3ca4fba6ffaa614809b4b970a2484df680a.gif)

| Property Group | Property | Description |
| --- | --- | --- |
| Basic | Id | Unique identifier for the control |
| Behavior | On Blur | Click this to create an OnBlur event for the control. On Blur is triggered when the control loses focus. |
| Behavior | On Create | Click this to create an OnCreate event for the control On Create is triggered when the control is painted to the GUI. |
| Comments | Comments | Add some developer notes to the control. These are not customer-facing and are only visible in App Studio (Fig. A) |
| Data | Key Field | Indicates that a bound component is a key field. If true, the field is enabled if there is no current record, allowing the user to select an existing record or create a new one. |
| Data | EpBinding | Bind the control to a DataView.Column. Set this to apply row rules to the shape. |
| Layout | Alignment | Sets the alignment of the control. (Fig. B) |
| State | Personalizable | If true, a user can personalize this component(hide/show) |
| State | Customizable | If true, a user can customize this component in child layers |
| State | Hidden | Hides the control from view. |
| State | Disabled | Disables the control. The control will not allow editing or focus. |
| State | Read Only | Makes the control read only so that it will not allow editing. The control can still be focused. |
| Advanced | Enabled Caption | Set the text to show when the shape is enabled. |
| Advanced | Disabled Caption | Set the text to show when the shape is disabled. |
| Advanced | Status | Set the status to change the color of the shape. Valid options include: OK, Warning, Stop, Global, and None which are Green, Yellow, Red, Blue, and None, respectively. |

**Figure A: Comments**

 ![image](https://www.epiusers.help/uploads/default/original/3X/9/7/97e0baff440ae6bc90dc576ed9ed3eae59076ff0.png)

**Figure B: Alignment**

 ![image](https://www.epiusers.help/uploads/default/original/3X/4/c/4c25f330fe6bd2afd6a2a6d444c2464fe3a9d327.png)

[Previous page](https://www.epiusers.help/t/kinetic-control-compendium/105887.md?page=3)

[Next page](https://www.epiusers.help/t/kinetic-control-compendium/105887.md?page=5)