Is there an ability to do one to many? I’m thinking of a Lot that gets issued to multiple Jobs.
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.
Create an event that’s triggered off of the OnCreate behavior and set the width property with a property-set widget.
3 Likes
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!
| 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 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
Figure B: Column Bindings
Remember, these come from whatever DataView you specified in the Data > EpBinding
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.
Figure D: Width
Figure E: Disable Views
Figure E: Show Work Hours
Figure G: Enable Export PDF
Figure H: Number of Days
Figure I: Work Start and End Times
Figure J: Selected Date
Figure K: Number of hours to be displayed
Appendix
DataViews
Create a dataview to hold the column bindings and to bind your grid to.
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.
Don’t forget to add some buttons. (Delete is unnecessary if you make the Scheduler editable)
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.
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.
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:
{
"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.
ce_SliderDelete
Again, this is unnecessary with the editable button, but here it is for demonstration purposes.
1 Like
Search Chip Selector
Allows a user to search and display selected items as chips.
| 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
Figure B: Alignment
Figure C: MultiField Binding
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 |
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
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.
| 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)
Clarification from @bconner:
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.
| 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
Text Area
Based on the rows, columns, and max length properties, users can enter vast numbers of characters. (Their words, not mine 
)
| 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 |
Sets the specific width (pixels) for the control. Doesn’t work. |
| Advanced | Max Length |
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 |
Maximum number of characters allowed in the text box. Doesn’t work. |
| Advanced | Pattern |
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. 
|
| Advanced | No Floating Label | Hide the floating label. (Fig. F) |
| Advanced | Auto Complete |
Allows the browser to predict the value to be typed in the text box. Doesn’t work. |
| Advanced | Auto Correct |
Corrects typos, capitalization errors, and misspelled words, as well as automatically inserting symbols and other pieces of text. Doesn’t work. |
| Advanced | Auto Capitalize |
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 |
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 |
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 |
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 |
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 |
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 |
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.
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…
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
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 |
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.