Kinetic Control Compendium

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.

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 :mag_right: Obsolete
Data > List Description Set the detailed description for the item (Fig. C)
Data > List SubText :mag_right: Set the sub-text value for the item. Doesn’t seem to do anything.
Data > List LeftIcon :mag_right: Set the icon for the list item. Doesn’t seem to do anything.
Data > List Command :mag_right: 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 :mag_right: 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 :mag_right: 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 :mag_right: 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 :mag_right: 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, :mag_right: 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 :mag_right: 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 :mag_right: 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 :mag_right: Sets the flag indicating if a sort button should be shown. Doesn’t do anything. Might be only for “Panel Mode”
Advanced Show Edit :mag_right: Set the flag indicating if an edit button should be shown. Only for Panel Mode. WTF IS PANEL MODE??
Advanced Enable Edit :mag_right: Set the flag indicating if editing of list items is allowed. Only used on… you guess it… Panel Mode.
Advanced Enable Header Edit :mag_right: 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 :mag_right: 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 :mag_right: Obsolete
Advanced Draggable :mag_right: Obsolete

Figure A: Label Text

Figure B: Comments

Figure C: Items

Figure D: Alignment

Figure E: Width

Figure F: Target Label Text

Figure G: Mode Type

Figure H: UI Mode

Figure I: Position Mode

Figure J: Reorder

Figure K : Rows


More info on setup from an older post: How To: Kinetic Selectable List

1 Like

Shape [of you?]

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

ShapeOfYou

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

Figure B: Alignment

1 Like

Tab

Allows a user to add a tabstrip where multiple tabs can be added.

**Use a Panel Card Stack for this if in 2023.2+ (See clarification below)
TabbyCat

Clarification from @bconner:

TabInPanel

See Panel Card Stacks for this.

Property Group Property Description
Basic Id Unique identifier for the control
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 applicable.
Data Data This is where you bind the pages to tabs.
Data > Data Id Unique ID for the tab.
Data > Data Title Title for the tab. (Fig. B)
Data > Data EpBinding EpBinding for the tab in the format of DataView.Column. You can use this to enact row rules on the tab (like hiding or showing by user or something).
Data > Data Selected Specifies the tab to be selected by default.
Data > Data Page Dropdown of pages available to bind to the tabs.

Figure A: Comments

Figure B: Title

1 Like

Tag

Allows users to have different colored labels and checkboxes for different statuses.

Tag

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 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 True Caption Set the caption on the shape when the checkbox is true.
Advanced True Status Set the shape color when the checkbox is true. Valid options include: OK, Warning, Stop, Global, and None for Green, Yellow, Red, Blue, and None, respectively.
Advanced False Caption Set the caption on the shape when the checkbox is false.
Advanced False Status Set the shape color when the checkbox is false. Valid options include: OK, Warning, Stop, Global, and None for Green, Yellow, Red, Blue, and None, respectively.

Figure A: Comments

Figure B: Alignment

1 Like

glitch you shouldnt have GIF by Bubble Punk

Text Area

Based on the rows, columns, and max length properties, users can enter vast numbers of characters. (Their words, not mine :sweat_smile: )

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. 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 of 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.
State Auto Focus When enabled, the control is automatically focused on creation.
Advanced Default Rows to Display Default number of rows to be displayed in the text area. (Fig. D)
Advanced Width :mag_right: Sets the specific width (pixels) for the control. Doesn’t work.
Advanced Max Length :mag_right: Maximum number of characters allowed in text area. Doesn’t work.
Advanced No Floating Label Hides the floating label. (Fig. E)
Advanced Spell Check Enables Spelling and Grammar checks. (Fig. F)

** Figure A: Label Text**

Figure B: Comments

Figure C: Alignment

Figure D: Default Rows to Display

Figure E: No Floating Label

Figure F: Spell Check

Textbox

Allows a user to enter or load a text value.

Property Group Property Description
Basic Id Unique identifier for the control
Basic Label Text Sets the label within the control. Doesn’t do anything. (Fig. A)
Behavior On Search Click Click this to create an OnSearchClick event 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. 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.
Data Ep Binding SearchDesc Binding for the Description element added to display a search with an additional description element. (Fig. C)
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 Max Length :mag_right: Maximum number of characters allowed in the text box. Doesn’t work.
Advanced Pattern :mag_right: Force input to match this regular expression. Doesn’t work. In fact, this fails soooo badly because it only allows numeric characters. What kind of RegEx is THAT going to be? HM? Update: Okay, it’s trying it’s hardest. Dev Tools shows an error “Qt.test is not a function”. And because of that lil nugget, it won’t let you commit your data. :upside_down_face:
Advanced No Floating Label Hide the floating label. (Fig. F)
Advanced Auto Complete :mag_right: Allows the browser to predict the value to be typed in the text box. Doesn’t work.
Advanced Auto Correct :mag_right: Corrects typos, capitalization errors, and misspelled words, as well as automatically inserting symbols and other pieces of text. Doesn’t work.
Advanced Auto Capitalize :mag_right: Makes text input automatically capitalized as it is entered/edited. Doesn’t work.
Advanced Spell Check Enables spell check and grammar. (Fig. G)
Advanced Enable Search Enables the search button. (Fig. H)
Advanced Search Only Disables text entry, but leaves the search button enabled. (Fig. I)
Advanced Masked Enables the masking of the text, usually used for password fields. (Fig. J)
Advanced LabelText SearchDesc Caption for the description element. Use with epBindingSearchDesc to set a custom label for the description element. (Fig. K)

Figure A: Label Text

Figure B: Comments

Figure C: Ep Binding SearchDesc

Figure D: Alignment

Figure E: Width

Figure F: No Floating Label

Figure G: Spell Check

Figure H: Enable Search

Figure I: Search Only

Figure J: Masked

Figure K: LabelText SearchDesc

1 Like

Time Picker

Allows a user to enter or pick a time value.

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.Column.
Layout Alignment Sets the alignment of the control. (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 Format :mag_right: Specifies the time format such as HH:mm:ss or hh:mm. The visual changes in App Studio, but nothing functionally happens.
Advanced Now Button Displays a Now button in the popup. (Fig. E)
Advanced Cancel Button Displays a Cancel button in the popup. Or… OR… You could just click out of it? (Fig. F)
Advanced Format Placeholder Defines the descriptions of the format sections in the input field. Valid options include: Short, Narrow, Wide, formatPattern (Fig. G)
Advanced Placeholder :mag_right: Specifies the hint the TimePicker displays when its value is null. But it doesn’t.
Advanced Max Specifies the largest, valid time value. (Fig. H)
Advanced Min Specifies the smallest, valid time value. (Fig. H)
Advanced Popup Settings Configures the popup of the Time Picker
Advanced > Popup Settings Animate Controls the popup animation. By default, the open and close animations are disabled. (Fig. I)
Advanced > Popup Settings AppendTo :mag_right: Controls the popup container. By default, the popup will be appended to the root component. Couldn’t get this to do anything.
Advanced > Popup Settings Popup Class :mag_right: Specifies a list of CSS classes that are used to style the popup. Couldn’t get this to do anything.
Advanced Steps Configures the incremental steps of the TimePicker
Advanced > Steps Hour Controls the hours incremental value. (Fig. J)
Advanced > Steps Minutes Controls the Minutes incremental value. (Fig. J)
Advanced > Steps Seconds Controls the Seconds incremental value. (Fig. J)
Advanced Range Validation :mag_right: Determines whether the built-in min or max validators are enforced when the form is being validated. Couldn’t get this to do anything.
Advanced ReadOnly Input Sets the read-only state of the TimePicker input field. Note: this does not gray out the field.
Advanced Mask Override the default display format for the time value using standard DateTime formats. Examples: hh:mm:ss (01:02:34.75), hh:mm TT (01:02 AM), h:mm:ss TT (1:02 AM) (Fig. K)
Advanced Use 24Hour Clock Determines whether to use the 24H clock. (Fig. L)
Advanced Time Stored As Date Time Determines whether to store the selected time as datetime or an integer (seconds from midnight). (Fig. M)
Advanced Is Decimal Determines whether to store the time as a decimal. (Fig. N)
Advanced Round To Minutes :mag_right: Specifies whether to round off seconds to minutes. Doesn’t work.
Advanced Treat Zero As Null Specifies whether to treat 0 as null or 12:00AM.

Figure A: Label Text

Figure B: Comments

Figure C: Alignment

Figure D: Width

Figure E: Now Button

Figure F: Cancel Button

Figure G: Format Placeholder

Figure H: Min and Max

Figure I: Animate
Left is unchecked, right is checked.
TimeAnimate

Figure J: Steps

Figure K: Mask

Figure L: 24h Clock

Figure M: Store as DateTime

Figure N: Is Decimal

2 Likes

Just ran across this thread…

Oh My God Wow GIF

Hannah. Holy moly.

Bonus thing to know about tabstrip is we did not really intend it to be used on the page body it was for inside-card data organization but we didn’t prohibit the use on the page body therefore folks are using it in a way that doesn’t work as well as we’d like. Epicor has used it also but will be replacing it with our intended solution.

Our intended solution for this is in 2023.2 where you can join cards together into a group in studio and we strongly recommend using that instead of placing tabstrips on the page body like you are showing here. This will make more sense in 2024.1 - users will be able to group and ungroup cards in personalization, but not if you have built a custom tabstrip layout.

3 Likes

Lmao yeah! Who do we send the bill to @bconner :joy::joy::joy:

2 Likes

Thanks! This is a workable solution. Alas, it also scales the rev field larger so it wastes a lot of space on a field that is typically only a couple characters, but I guess that’s the theme in Kinetic.

1 Like

Token Date

Allows a user to select a date value using a calendar or a tokenized date (such as Today, Tomorrow, Today+1, etc)

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.Column. This is for the date value when the token is not used.
Data EpBinding ShowToken Bind the control to a DataView.Column. This is for the “Dynamic” checkbox that shows true or false towards using the token.
Data EpBinding Token Bind the control to a DataView.Column. This stores the token value. Example: &Today+1
Layout Alignment :mag_right: Sets the alignment of the control. Doesn’t work without some effort. In order for this to display anything, you need to set the width property which is not inherently available. You will need to do an OnCreate event and then use the property-set widget for the width. Then this will show some visible effect. (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.
State Auto Focus When enabled, the control is automatically focused on creation.
Advanced Token Value Set the default token value. Example: &Today-1 to set the value to “Yesterday”. Pro Tip. Bind the EpBinding Show Token to a string field, then put a textbox bound to the same field to see the different token values when selected.
Advanced Show Token Set the flag to determine if the token dropdown should be visible. (Fig. D)
Advanced Min Allowed Date Set the date’s minimum allowed value. (Fig. E) Note, this does not stop a user from setting a token that would go past that date.
Advanced Max Allowed Date Set the date’s maximumallowed value. (Fig. E) Note, this does not stop a user from setting a token that would go past that date.

Figure A: Label Text

Figure B: Comments

Figure C: Alignment

Figure D: Show Token

Figure E: Min/Max Allowed Dates

1 Like

Que up the requests for user-defined tokenized dates…

I’m sure this still works.

Beginning of Fiscal Year? :thinking:

1 Like

Website Widget

Okay, so there are two of these.
One is in Toolbox > Components > WebSite “Widigit” Control (not my spelling, don’t hurt me). We’ll call this one Web1.
The other is in Toolbox > Widgets > Website Widget. We’ll call this Web2.

Web1 works for displaying and interacting with a website, but does not take parameters in the URL.
Web2 does the same as Web1, but also allows a user to pass in parameters.

The properties are the same, so I will only be going over the Web2 one since it can do more.

image

Property Group Property Description
Basic Id Unique identifier for the control
Basic Title Set the title of the frame. (Fig. A)
Basic Url Set the URL. The website must support embedding in an IFrame and must use HTTPS. Parameterized URLs are supported. Example: https://www.stephengould.com/?s={ABCCode.String1_c} (Fig. B)
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. C)
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.
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
Advanced Icon Set the icon that will be displayed in design mode. Format: mdi mdi-your-icon A list of icons can be found here: Material Design Icons (pictogrammers.github.io) (Fig. E)
Advanced Token Enable to pass a Bearer Token in the URL. The embedded website can use bearer tokens for ERP Server Authentication. (Fig. F)
Advanced User Context Enable to pass user context in the URL. (Fig. G)

Figure A: Title
image

Figure B: Url
image

Figure C: Comments
image

Figure D: Height and Width
image

Figure E: Icon
image

Figure F: Token
image

Figure G: User Context
image

2 Likes

You get this and you will like it.

RvLock

User defined control that shows Review Journal and Lock Status.
Incidentally, this control doesn’t have a delete option. Place at your own risk. :rofl:

I’m not going to go into the properties of this as they are just textboxes. You can look at the textbox control for more info.

Note: You can also make your own.
I’ll show that in another post. Eventually. Maybe?

**Edit: Looks like they added a way to do this from the App Studio landing page. The method I used previously involved creating the JSON for it, putting it on the server, then running Conv 191. Y’all can probably figure it out from there.

Ooooh, I like the Widget way better than the Widigit.