Kinetic Control Compendium

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Foreign Lang Desc

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

GL Account Editor

General Ledger Multi-book account editor component with possible multi-book account code entries.
I can’t, for the life of me, figure out how to make the description stop being red by using the properties of this field alone.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Label Text	Sets the label within the control. (Fig. A)
Behavior	On Book Select	Click this to create a useless event you’ll have to delete. (Fig. B for the lulz)
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.
Data	EpBinding	Bind the control to a DataView.Column.
Data	Coa Code Column	Set the data binding for the COA Code using the format View.Column. This is a column the control pulls from to read the COA Code. Needs to be an actual DB column. (Fig. D)
Data	Binding External CompanyId	Set data binding for the External CompanyID. Format: View.Column. (Fig. E)
Data	Binding Description	Set the data binding for the Description. Format: View.Column (Fig.E)
Data	Binding Acct Disp	Set the data binding for the Account Display. Format: View.Column. (Fig. E)
Data	Binding Segments	Set the data binding for the Segments. This will generate 20 different bindings in the format of View.Column1 - View.Column20. Format: View.Column (Fig. E)
Data	Binding Invalid Account Message	Set the data binding to retrieve the invalid message. Format: View.Column. (Fig. E)
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. (Fig. F)
Layout	Width	Sets the specific width (pixels) for the control. (Fig. G)
Layout	Description Width	Sets the width of the description which must be less than the total width. (Fig. G)
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	Account Search Event Binding	Set an event name to overwrite the default account search event. The trigger for the event needs to be EpBinding/OnClick/EventName where the event name is the event you’re currently editing. Yup. (Fig. H)
Advanced	Segment Search Event Binding	Supposed to be the same as the account one, but for segments, but I could not get this one to fire. Maybe it’s the book icon? If so–that one is broken too.
Advanced	Description Orientation	Set the orientation for the description field. Valid Options include: horizontal and vertical. (Fig. I)
Advanced	Hide Dynamic	Enable to hide dynamic segments.
Advanced	Do not require Dynamic	Check this to disable dynamic segments required
Advanced	Allow Pattern	Enables patterns in account. This is some GL-ese I don’t speak. Not sure what this does.
Advanced	Pattern Options	Select a pattern option allowed in the account. Valid options include: All, percent, underscore. Again–this is some GL-ese I don’t speak. Maybe someone in finance can weigh in?
Advanced	Validate Segment Values	Enable to include segment validation when typing in a GL. (Fig. J)
Advanced	Validate Account Code	Enable to include account code validation when typing in a GL. (Fig. J)
Advanced	Validate Account on Load	Enables validation when the account is loaded. Not sure how to test this to fully describe it.
Advanced	Validate Required Segments	Enables validation of the entered required segments. (Fig. J)
Advanced	Validate Segment Properties	Enable to include segment property validation. (Fig. J)
Advanced	Hide Segment Labels	Marked as obsolete.
Advanced	Show Description	Enable to show the description field. (Fig. K)
Advanced	Do not cache description	Checking this disables the description caching. Not quite sure what this means.
Advanced	Show Account Search Button	Checking this shows the search button. (Fig. L)

Figure A: Label Text

Figure B: On Book Select

Figure C: Comments

Figure D: COA Code Binding
Note–I’m using the currency column because it’s the only string column I had to use that wasn’t a KeyField.

Figure E: Data Bindings

Figure F: Alignment

Figure G: Width

Figure H: Account Event Binding

Default

Custom Event

Figure I: Description Orientation

Figure J: Validations

Figure K: Show Description

Figure L: Show Account Search

[jkane (John Kane)]

@hmwillett

Foreign Lang Desc

This is my favorite one.

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

GL Control Panel

A grid of GL Control Types and Codes.

This control is busted. I can’t get it to do anything. It doesn’t even react–as in no console or network activity of any kind. At all.
I will outline the properties and what they should do, but don’t expect this one to work. Or–if you do get it working, come tell me what TF I’m missing.

But FIRST! … Some code discrepancies between my control setup and Epicor’s native one.

Look at that. That boxed line there. The Rest Service.
Do you see that property anywhere? No? Me neither. But has that ever stopped me? …Nope! So, I went and added the line in myself in the JSON and pushed it back into the DB. Did it fix the control? Also nope. Whatever. I’m over it. I am NOT patient enough to submit this one to support. To walk them through how to set this up… I can’t won’t do it!

---

And now for something completely different.

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 to this control.
Data	EpBinding	Bind the control to a DataView only. No column. You will also need to configure the dataview (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.
Advanced	Expand At Runtime	Expand the panel by default when the form opens at runtime. Doesn’t work. At all. It doesn’t even add it to the JSON. I can add it to the JSON and make it work. But the property doesn’t. (Fig. C)
Advanced	Business Entity	Set the business entity that the GL control type links to. The business entity defines what areas of the database the GL control type updates through its account and journal contexts. Example: APInvHed
Advanced	Search for GL Control Type	Set the search to run for the GL Control Type Field. Default search used is ‘GLCTEntity.GLControlType’. This comes up when you click the New Row icon, then Search. (Fig. D) See Addendum for how to configure the REST call to make new New button work.
Advanced	Search for GL Control	Set the search to run for the GL Control Type Field. Default search used is ‘GLCTEntity.GLControlCode’. This comes up when you click the New Row icon, then Search. See Addendum for how to configure the REST call to make new New button work.
Advanced	Full Screen	Enable full screen mode! (Fig. E)
Advanced > Rest call arguments	Related Entity	Set the data binding in the format View.Column for the realtedToFile parameter value. Example: ApInvHed
Advanced > Rest call arguments	Epbinding for first related entity key	Set the data binding in the format View.Column that will provide the value for the first key in the relatedToFile Table. Example: ABCCode.Integer1_c which maps to VendorNum. Run a BAQ on the EntityGLC table to get some sample data for each RelatedToFile.
Advanced > Rest call arguments	Epbinding for second related entity key	Set the data binding in the format View.Column that will provide the value for the second key in the relatedToFile Table. Example: ABCCode.String1_c which maps to InvoiceNum.
Advanced > Rest call arguments	Epbinding for third related entity key	Set the data binding in the format View.Column that will provide the value for the third key in the relatedToFile Table. Example: ABCCode.String2_c which maps to GroupID.
Advanced > Rest call arguments	Epbinding for fourth related entity key	Set the data binding in the format View.Column that will provide the value for the fourth key in the relatedToFile Table.
Advanced > Rest call arguments	Epbinding for fifth related entity key	Set the data binding in the format View.Column that will provide the value for the fifth key in the relatedToFile Table.
Advanced > Rest call arguments	Epbinding for sixth related entity key	Set the data binding in the format View.Column that will provide the value for the sixth key in the relatedToFile Table.

Figure A: Comments

Figure B: EpBinding

Note the difference Dataset/Table

Figure C: Expand at Runtime JSON
The only way I could get this to work is to add it myself to the code. I’m not going to explain how.

Figure D: Search for GL Control Type

Figure E: Full Screen

Addendum

REST Setup for New button

The event must be called GetNewEntityGLC (or some variation of your dataview). If you named your dataview Stroopwafel, then name the event ‘GetNewStroopwafel’.

Method Parameters (modify to your specific BO call):

ds: empty
realtedToFile APInvHed
key1: Bound vendor column {ABCCode.Integer1_c}
key2: Bound invoice number column {ABCCode.String1_c}
key3: Enter a space, this is empty.
key4: Enter a space, this is empty.
key5: Enter a space, this is empty.
key6: Enter a space, this is empty.

ERP Rest Arguments > Request Parameters > Dataset (modify to your specific BO)

System Code: ERP
Dataset Id: APInvoice

#SuperGoodEnough

---

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

GL Multibook Account Editor

Some of these I just don’t know what to tell y’all.
It seems like the GL Account Editor with extra steps that… don’t work. And it pulls dataviews out of it’s magical GL ass. I hate accounting.

Gonna keep on going and revisit these ones later.

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Grid

The 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 occurs when the panel card is opened. (Fig. B)
Behavior	On Panel Card Collapse	Hook into an event which occurs when the panel card is closed. (Fig. B)
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. Not relevant to this control.
Data	EpBinding	Bind the control to a DataView.Column. I’ve never used this binding field. I don’t believe this is relevant to this control.
Data > Grid	Scrollable	Determines how the data in the grid is rendered. Valid options include: None, Scrollable, Virtual (requires page size property as well). None will load the entire dataset up front and load it into the grid. Presumably, scrollable does the same? Virtual render the number of rows (page size) and will load that many more as you scroll.
Data > Grid	Height	Sets the height of the grid in pixels. (Fig D.)
Data > Grid	Width	Sets the width of the grid in pixels. (Fig D.)
Data > Grid	Row Height	Has no effect.
Data > Grid	Page Size	Sets the number of records to render for the Virtual scroll model. (Fig. E)
Data > Grid	Entity Type	No idea!
Data > Grid	Drag Image Icon	No idea!
Data > Grid	Resizable	Enable to allow the user to resize the column headers.
Data > Grid	Sortable	Sorting is enabled regardless of this checkbox.
Data > Grid	Pageable	Paging seems to happen regardless.
Data > Grid	Groupable	Not sure why this is tri-state, but enabling it allows a user to group on columns. (Fig. F)
Data > Grid	Filterable	Enable to allow filtering. (Fig. G)
Data > Grid	Advanced Filter	Doesn’t change the filter settings. #Shrug
Data > Grid	Reorderable	Allows the user to reorder the columns to their fancy. (Fig. H)
Data > Grid > Row Reorder	Reorder Rows	Reorder Rows
Data > Grid > Row Reorder	Sortable Column Name	Set the sortable column name. So, I just have no words here. There’s some effed up looping going on. Here’s a GIF for the lulz, but I would stay away from this property. (Fig. I)
Data > Grid	Editable	Enables editing of the grid cells. This is to be used in conjunction with Columns > Editable. (Fig. J)
Data > Grid	Disable Paste New	Disables the paste new operation from the right-click menu. (Fig. K)
Data > Grid	Disable Paste Update	Disables the paste update operation from the right-click menu. (Fig. K)
Data > Grid	Selectable	Enables the selection of rows. Used in conjunction with Data > Grid > Selection Options. (Fig. L)
Data > Grid	Maximum Columns	Set the max number of columns to be displayed. This will display the first N columns returned from the dataset. (Fig. M)
Data > Grid > Selection Options	Checkbox Selection	Shows a column of checkbox selectors. (Fig. L)
Data > Grid > Selection Options	Show Select All	Shows a checkbox in the upper-left that selects all rows. (Fig. N)
Data > Grid > Selection Options	Select by Field	Boolean field to designate that the row has been selected. Generally, this is a hidden column you create. (Fig. O)
Data > Grid > Selection Options	Select All EpBinding	Set the data binding to indicate select all has been checked in the format of DataView.Column. (Fig. P)
Data > Grid > Selection Options	Select All Page Count	Set the Select All page total for how many rows/pages are loaded and selected if not all the records can be selected up front. Didn’t seem to do anything.
Data > Grid > Edit Options	Edit Mode	Not sure. They don’t seem to do anything different.
Data > Grid > Edit Options	Update On Change	Enable the update on change mode (otherwise update occurs on leaving control). Doesn’t seem to trigger anything.
Data > Grid > Columns	Field	Set the field name from the dataset. If it’s from a BAQ, then it would be in the format of Table_Column. If it’s from a dataview bound to the grid, then it would just be the column name with no table or dataview prefix. BAQ Example: Part_PartNum | BO Example: PartNum
Data > Grid > Columns	Title	Give the column header a title. This will default to the Field name if none is supplied. (Fig. Q)
Data > Grid > Columns	Ep Binding	Set the data binding for the column using format View.Column (special cases). What are those special cases? Who knows?
Data > Grid > Columns	ID	Set the ID for the column. This can be used in events.
Data > Grid > Columns	Erp Editor	Select the type that the column will be such as Boolean, Combo, Text, Currency, etc. This is used in conjunction with the Erp Editor Model to define the special behaviors of each. For instance, if setting the Erp Editor to Combo, you can then define the data in said combo by using the Erp Editor Model.
Data > Grid > Columns	Erp Editor Model	As mentioned above, this is used to define the properties of the Erp Editor. To find out more, reference the appropriate control within this page. Text = Textbox, Boolean = Checkbox, Combo = Combo, etc.
Data > Grid > Columns	Disable Currency Toggle	Enable this to prevent the currency from toggling when using the Currency Selector control.
Data > Grid > Columns	Is Link	Turns the data within this column into a clickable link. You will need to set up any actions by creating an event using the Grid/onClick event. (Fig. R)
Data > Grid > Columns	Skip Row Change On Link Click	Disables any row change events that may fire when clicking the link.
Data > Grid > Columns	Filterable	Enables or Disables filters for the column. (Fig. S)
Data > Grid > Columns	Sortable	Enables or Disables sorting for the column.
Data > Grid > Columns	Width	Sets the specific width of the column in pixels. (Fig. T)
Data > Grid > Columns	Editable	Enables editing for the column. (Fig. J)
Data > Grid > Columns	Selector	Sets the column as the designated selector. (Fig. O)
Data > Grid > Columns	Hidden	Hides a column (Fig. U)
Data > Grid > Export Excel Settings	File Name	Name of the Excel file when exporting. (Fig. V)
Data > Grid > Export Excel Settings	Number of pages to export	Doesn’t do anything. My page size is 50, I set this to 1, and it downloaded all 1,000 rows.
Data > Grid	ID	Set the ID of the grid. This is used to affect the grid in events.
Data > Grid	Ep Binding	The data binding for the grid when the view is populated elsewhere (events). Format: DataView Example: ABCCode
Data > Grid > Columns Hidden	Field	The column name to hide from the grid. This is useful if you only want to hide one or two vs using Columns to explicitly define what to show. If it’s from a BAQ, then it would be in the format of Table_Column. If it’s from a dataview bound to the grid, then it would just be the column name with no table or dataview prefix. BAQ Example: Part_PartNum | BO Example: PartNum
Data > Grid > Provider Model	Ep Binding	Set the name of the view that receives the data from the server call. Format: ABCCode
Data > Grid > Provider Model	Description	This is basically just a comment for the provider model.
Data > Grid > Provider Model	Svc	The REST service that provides the data. Example: Erp.BO.PartSvc (Fig. W)
Data > Grid > Provider Model	Svc Path	The REST method to be called. Example: GetList (Fig. W)
Data > Grid > Provider Model	Table Name	The table name that holds the data. Example: PartList (Fig. W)
Data > Grid > Provider Model	Out Param Name	Set the out parameter name that holds the rows of data. Example: returnObj (Fig. W)
Data > Grid > Provider Model	Client Filter	Supposed to filter the dataset after it’s returned from the server. Can’t get it to work.
Data > Grid > Provider Model	Rest Params	Set a JSON object composed of key-value pairs that define the parameters that are sent into the service call. Example: { "whereClause": "PartNum = '10008'" } (Fig. W)
Data > Grid > Provider Model	Columns	Doesn’t work. Use the columns from the Grid Model section.
Data > Grid > Provider Model	BAQ ID	BAQ Identifier that will provide data. Example: PartList (Fig. X)
Data > Grid > Provider Model > BAQ Options	Page Number	If there are multiple pages, this defines the first page to display.
Data > Grid > Provider Model > BAQ Options	Page Size	Page size (number of rows) of data to return.
Data > Grid > Provider Model > BAQ Options	Where	Where Clause for the BAQ. (Fig. Y)
Data > Grid > Provider Model > BAQ Options > Where List	Column	The BAQ column name to filter on. Format: Table_Column (Fig. Z)
Data > Grid > Provider Model > BAQ Options > Where List	Condition	The operator to use. Valid options include =, <=, >=, <>, starts, matches, like (% wildcard). (Fig. Z)
Data > Grid > Provider Model > BAQ Options > Where List	Value	The value to check against. Format is '??{DataView.Column}' or a literal. Use single quotes around strings. A single ‘?’ will not let the REST call happen if the value is empty or null. ‘??’ will make the REST call regardless of the value. (Fig. Z)
Data > Grid > Provider Model > BAQ Options > Where List	Honor Null	Honor null will send null if the value is… null! Otherwise, it will NOT append that where item to the where clause in the case of a null value.
Data > Grid > Provider Model > BAQ Options > Where List	Empty Value	If the value of the binding is empty, this will get sent instead.
Data > Grid > Provider Model	Page Padding Size	Overrides the default of 2 additional pages of data that should be retrieved when using server paging with a BAQ data provider.
Data > Grid > Provider Model	Auto Load Grid	Indicate if the grid column definitions should be autoloaded using existing definitions for the bound dataview columns.
Data > Grid > Provider Model	Set Default	Indicate if this provider is the default selection in the provider list on the panel card grid. Not sure with this one since you cannot add multiple providers here.
Data > Grid > Provider Model	Server Paging	Indicate if this provider retrieves data as needed as the user scrolls through grid pages instead of returning them all at once.
Data > Grid	Collapse Groups	Collapse all groups by default. Doesn’t work.
Data > Grid	Auto Load Columns	Not sure what this does because the columns auto load by default anyways.
Layout	Minimum Width	Sets the minimum width the panel can shrink to when the page is in Flex Layout Mode. (Fig I ← Roman Numeral 1)
Layout	Width	Doesn’t seem to do anything.
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	Auto Fill Container	Enable this to have the grid take the full size of the container it’s in. (Fig. II)
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.
Advanced	Hide Filter Icon	Hides the filter icon from the Panel Card.
Advanced	Disable Panel Card Style	Pretty much removes the padding around the outside. This is nice when you’re embedding a panel in a tab control. (Fig. III)
Advanced	Export to Excel Disabled	Removes the option to Export to Excel from the Overflow Menu
Advanced	Disable Copy Options	Removes the Copy Options from the right-click. (Fig. IV)
Advanced	Show Filter and Group Options	Turns on the Group Box and Filters by default. (Fig. V)
Advanced > Action Data	ID	The ID of the toolbar button.
Advanced > Action Data	Description	The description of the toolbar button. This shows up as the label. (Fig. VI)
Advanced > Action Data	Icon	Sets the icon next to the description. Format: mdi mdi-icon-name Icon names can be found here: Material Design Icons (pictogrammers.github.io) (Fig. VII)
Advanced > Action Data	Image Url	Set the url that points to the image that is to be displayed on the action item. Couldn’t figure this one out.
Advanced > Action Data	Ep Binding	Set the data binding for the action item. This is used for onClick events and others as well as rules. Format: DataView.Column.
Advanced > Action Data	ShortCut	Set the keyboard shortcut to fire the onClick event. Example: CTRL+ALT+A
Advanced > Action Data	Add to Primary ToolBar	Indicate if the item should be shown in the toolbar next to the overflow menu on the panel card header. (Fig. VIII)
Advanced > Action Data	Disabled	Disables the tool. This still seems to show the click animation, but the event doesn’t fire. #SuperGoodEnough? (Fig. IX)
Advanced > Action Data	Add Divider	Adds a divider below the menu item. (Fig. X RN)
Advanced > Action Data	Sequence	Set the numeric sequence of this item in relation to the other items. (Fig. XI)
Advanced > Action Data	System Tool Type	Set the system defined type for this action item. If this value is set, all properties of the item will be overridden with the system defined properties. Doesn’t do anything when set. #Shrug
Advanced	View Options	This is where you can define different, selectable views for a single grid. For instance, if you have a sales order grid, you can have views for All, Open, and Closed. To configure these, please refer to the previously mentioned Provider Model. The setup is the same. You would just set different where clauses for each view. Some points of note that work here and not the overall provider model is the Description shows the text in the View combo and the Set Default selects that view over the others to load by default. (Fig. XII)

Figure A: Title

Figure B: Behaviors

Figure C: Comments

Figure D: Height/Width

Figure E: Page Size

Figure F: Groupable

Figure G: Filterable

Figure H: Reorderable

Figure I: Reordering of Rows?

Figure J: Editable

Figure K: Disable Paste Operations

Figure L: Selectable

Figure M: Max Columns

Figure N: Select All

Figure O: Select by Field

Figure P: Select All EpBinding

Figure Q: Title

Figure R: Is Link

Figure S: Filterable

Figure T: Width

Figure U: Hidden

Figure V: File Name

Figure W: Provider Model

Figure X: BAQ ID

Figure Y: Where Clause

Figure Z: Where List
You can add as many of these as you need, but they will always be concatenated with “AND”. If you want to do an “OR” you will need to write it yourself in the “Where” found in the BAQ Options.

Figure I (Roman Numeral): Minimum Width

Figure II: Auto Fill Container

Figure III: Disable Panel Card Style

Figure IV: Disable Copy Options

Figure V: Show Group and Filter

Figure VI: Description

Figure VII: Icon

Figure VIII: Add to Primary Toolbar

Figure IX: Disable

Figure X (Roman Numeral): Add Divider

Figure XI: Sequence

Figure XII: View Options

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

GroupBox

Use to group controls with an optional label so that they stay together as the UI responds to smaller screens.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Label Text	Sets the Title of the group. (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	No idea why this is even here as you can’t bind a group box…
Layout	Minimum Width	Sets the minimum width the panel can shrink to when the page is in Flex Layout Mode. (Fig. C)
Layout	Flex Direction	Options include: Row, Column, Default. Couldn’t get it to flex at all. This one may need to hit up the gym some more.
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

Figure A: Label Text

Figure B: Comments

Figure C: Minimum Width

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Label

Allows the user to create a label.

Property Group	Property	Description
Basic	Label Text	Set the text of the label. (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.
Data	EpBinding	Set the data binding in the format of DataView.Column. This will replace what’s in the LabelText property. (Fig. B)
Layout	Alignment	Set the alignment of the text to Right, Center, or Left. (Fig. C)
State	Hidden	Hides the control from view.

Figure A: Label Text

Figure B: EpBinding

Figure C: Alignment

[Mark_Wonsil]

You’re comp-owning it!

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Link Combo Box

incoming…

Wow, okay, so yeah. This was something.
Allows a user to select from a list of predefined formulers and populate values within them.

* I did not set events to do anything with the formula in this example:

Make sure to view the bottom Event configurations to make this thing work!!!

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Label Text	Sets the label text 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 button to a DataView.Column.
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. (Fig. C)
Layout	Width	Sets the specific width (pixels) for the control. (Fig. D)
Misc	EpBinding for Phrase Items	Optional binding to a dataview that has the definitions for the items and phrase items. Honestly–I didn’t bother with this optional binding… 'cause optional. Yeah.
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 > Items	ID	Set an ID of the first collection of items–the row if you will.
Advanced > Items > Phrase Items (Type: Text)	ID	The ID for the item. (Fig. E)
Advanced > Items > Phrase Items (Type: Text)	Type	Type is Text or Link. Link will be clickable. (Fig. E)
Advanced > Items > Phrase Items (Type: Text)	Text	The, well… the text! (Fig. E)
Advanced > Items > Phrase Items (Type: Text)	Max Width	If the maximum width of the phrase item in the combo is exceeded, ellipses are used. (Fig. E)
Advanced > Items > Phrase Items (Type: Text)	AlwaysClickable	The phrase item is clickable even if read only or within an inactive grid row when type is link. (Fig. E)
Advanced > Items > Phrase Items (Type: Link)	ID	The ID for the item. (Fig. F)
Advanced > Items > Phrase Items (Type: Link)	Type	Type is Text or Link. Link will be clickable. (Fig. F)
Advanced > Items > Phrase Items (Type: Link)	EpBinding	Set the data binding the link reads from/to. Format Dataview.Column. (Fig. F)
Advanced > Items > Phrase Items (Type: Link)	Default Text	The text shown first before being replaced by the text in the binding. (Fig. F)
Advanced > Items > Phrase Items (Type: Link)	Max Width	If the maximum width of the phrase item in the combo is exceeded, ellipses are used. (Fig. F)
Advanced > Items > Phrase Items (Type: Link)	AlwaysClickable	AlwaysClickable

Figure A: Label Text

Figure B: Comments

Figure C: Alignment

Figure D: Width

Figure E: Phrase Type Text

Figure F: Phrase Type Text

---

Events and Views

Create a dataview:

Get the ID of your Link Combo

Create a new event

The trigger is going to be:
Type Control
Hook onLinkClick (This is not in the dropdown… you just have to magically know this!! )
Target The ID you just copied.

Put in a Switch. The value for the switch will be %value% to get whatever was just clicked. These values will correspond to the IDs you set for each Phrase item. The action off of that case statement will be row-update.

In the row update, set the Binding to DynamicPanel.Text1. This will be used in the next widget.
Set the value to the binding of your Phrase item. For the operator, bind it to TransView.ExOper. Or don’t. I dunno. That’s just what I found Epicor doing when I reverse engineered it.

The switch fails without this. Make sure to do an OnSuccess on your row-update widget. Throw a console-write after so that if you need to rearrange downstream widgets, you don’t have to start over. Initialize DyanmicPanel.Text1 and TransView.ExOper with what’s in our bindings presently.

Now attach some dynamic-panel-open widgets.

Give it a title.

Here’s the code for a textbox component. Note that it’s using the DynamicPanel.Text1. If you bound that to something else, change it here too.

[
	{
		"controlTypeId": "ErpTextBox",
		"controlModel": {
			"labelText": "Enter Text",
			"epBinding": "DynamicPanel.Text1"
		}
	}
]

You can technically do the same for the operator (Make sure to change the binding, though), but Epicor got fancy with theirs. Here’s the code for that:

[
	{
		"controlTypeId": "ErpSelectionList",
		"controlModel": {
			"epBinding": "TransView.ExOper",
			"items": [
				{
					"id": "+",
					"text": "+ Addition",
					"selected": true
				},
				{
					"id": "-",
					"text": "- Subtraction"
				},
				{
					"id": "*",
					"text": "* Multiplication"
				},
				{
					"id": "/",
					"text": "/ Division"
				}
			],
			"uiMode": "singleSelect",
			"valuePrimitive": true,
			"mode": "SingleSelect",
			"draggable": true
		}
	}
]

On the panel’s OnOK response, set up more row-updates to send that info back to the page bindings.

Now you have the values. Or something. Create a button to do something with that formula. I don’t know. This control was stupid.

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Anyone know a good neurosurgeon?
I think I’ve got brain damage from that one.

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

List Box

Allows a user to display a list of preset items. This control allows for single or multiple selections.

The properties on this control are nearly identical to the ones for the List Selection Box, however this is the pared down version and most properties don’t do anything.

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 button to a DataView.Column. Multiple selections will be delimited and stored by their ID.
Data > Items	Id	Set the unique ID for the items. This is also what is stored in the EpBinding for the control. (Fig. C)
Data > Items	Text	Set the display text for the item. (Fig. C)
Data > Items	Id Name	(Obsolete)
Data > Items	Description	Detailed description for the item. This is internal only. (Fig. D)
Data > Items	SubText	Doesn’t do anything.
Data > Items	LeftIcon	Doesn’t do anything.
Data > Items	Command	Might do something if I could, you know, know what it’s looking for here. What a crap shoot!
Data > Items	Selected	Set the flag indicating the list item is selected. It shows it in App Studio as selected, but it doesn’t work in the actual application.
Data > Items	Check Mark Hidden	Hides the checkmark for the item, but still allows for selection. Nothing like confusing your users! (Fig. E)
Data > Items	Toggle Disabled	Indicates if the list item is disabled. There’s no visual to actually SHOW that it’s disabled, though. Again–nothing like confusing your users!
Data > Items	Required	This one is neat. /s Sets a flag indicating that the item is required. Yes–it does indicate that. It also doesn’t allow you to click the item nor does it automatically add it to the binding… (Fig. F)
Data > Items	Bookmark	Set the flag indicating the list item has a bookmark. Doesn’t do anything.
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. (Fig. G)
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	Selection Mode	This determines whether the user can select single or multiple values at once. This defaults to multi-selection mode. Valid options include: single and multi. (Fig. H)
Advanced	Target Label Text	Set the label text for the target list. Doesn’t do anything.
Advanced	Mode Types	Set the display mode such as single, dual, or panel. Doesn’t do anything.
Advanced	Ui Mode	:mag_right Set the UI mode such as select, single-select, or switch. Doesn’t do anything.
Advanced	Position Mode	Set the position mode (left or right). Doesn’t do anything.
Advanced	Reorder	Set the reorder mode (All or selected). Doesn’t do anything.
Advanced	Header	Sets the label text for the list. Only used on Panel Mode and thus–doesn’t do anything.
Advanced	Limit	Set the limit of the items to be displayed. Only used on Panel Mode and thus–doesn’t do anything.
Advanced	Rows	Sets the number of items to be displayed. (Fig. I)
Advanced	Manual Sort	Sets the flag indicating if the Sort button should be shown. Doesn’t work.
Advanced	Show Edit	Sets the flag indicating if the Edit button should be presented. Panel mode only. Doesn’t work for this control.
Advanced	Enable Edit	Set the flag indicating if editing of list items is allowed. Panel mode only. Doesn’t work for this control.
Advanced	Enable Header Edit	Sets the flag indicating if the edit button should be presented at the top of the list. Panel mode only. Doesn’t work for this control.
Advanced	Value Primitive	Specify the type of selected value. If set to true, the selected value has to be of a primitive value. Not sure what this is supposed to do. Doesn’t seem to change anything.
Advanced	Delimited	Set the flag indicating if the multi-select value for binding is delimited. It’s delimited regardless of this checkbox.
Advanced	Delimiter	Set the delimiter character used for the binding. Valid options include: Nothing, “~”, “,”, or “`”. (Fig. J)

Figure A: Label Text

Figure B: Comments

Figure C: Id and Text

Figure D: Description

Figure E: Checkmark Hidden

Figure F: Required

Figure G: Alignment

Figure H: Selection Mode
Multi

Single

Figure I: Rows

Figure J: Delimiter

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Multi-Level Menu

Functionality be like…

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Multiview Calendar

The Multi-View calendar is an Angular form control that represents a graphical Gregorian calendar with multiple horizontal views. It supports the selection of and navigation between dates as well as data templates and ranges for scheduling appointments.

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 button to a DataView.Column.
Data	Range Start EpBinding	Set the data binding to hold the start date of the selected range. Only used if the “Range Selection” property is enabled. (Fig. C)
Data	Range End EpBinding	Set the data binding to hold the end date of the selected range. Only used if the “Range Selection” property is enabled. (Fig. C)
Data > Selection Range		Sets or gets the selection range property of the calendar and defines the selection range of the component. This really only works if the Range EpBindings are null.
Data > Selection Range	Range Start Date	The default start date for the range.
Data > Selection Range	Range End Date	The default end date for the range.
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. Kinda wonky depending on where it’s placed… (Fig. D)
Layout	Width	Sets the specific width (pixels) for the control. (Fig. E)
Layout	Months Displayed	Show the number of months. By default this is 2. (Fig. F)
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	Range Selection	Set to enable a range selection. Otherwise, this will be single select.
Advanced	Range Validation	Supposed to enforce some min/max validators, but those do not exist on this control, so this does not work.
Advanced	Week Number	Set to display the week number column. (Fig. G)

Figure A: Label Text

Figure B: Comments

Figure C: Range EpBindings

Figure D: Alignment

Figure E: Width

Figure F: Months Displayed

Figure G: Week Number

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Nav Link

Navigation link uses anchor tags to display links.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Name	Set the text to be displayed on the anchor tag. (Fig. A)
Basic	Text	Set the text for the anchor tag. (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.
Data	EpBinding	Bind the button to a DataView.Column. This doesn’t seem to control anything.
Data	Page	Specifies the page to open within the application. (Fig. D)
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. (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.
Advanced	Href	Set a URL to redirect to when clicking the anchor tag. If you have the page specified as well, it will briefly navigate to that page, then redirect to the Url. (Fig. F)
Advanced	Icon	Specifies the icon next to the anchor tag. Format: mdi icon-name. Example: mdi mdi-triforce. Icons found here: Material Design Icons (pictogrammers.github.io) (Fig. G)
Advanced	Target	Specifies how the href link will open. Valid options include: _blank (opens in new tab), _parent (deprecated in HTML5), _self (opens in current tab), _top (deprecated in HTML5).
Advanced	Relationship	Specifies the relationship between the current document and the link. Examples: HTML attribute: rel - HTML: HyperText Markup Language | MDN
Advanced	Title	Specifies the tool tip for the link. (Fig. H)

Figure A: Name

Figure B: Text

Figure C: Comments

Figure D: Page

Figure E: Alignment

Figure F: Href

Figure G: Icon

Figure H: Title

---

Word of caution: don’t click this. After clicking it, it would not let me return to the properties window for any control until I fully closed App Studio and went back in.

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Numeric Box

Meant for numeric entry, numbers/decimals/currencies etc. Provides validations and checks.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Label Text	Sets the label within the control. (Fig. A)
Behavior	On Search Click	When the search checkbox is enabled, click this to create an event to control the search. This normally predefines everything, but this one gives you a nice, “undefined_onClick” event. How neat.
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 button to a DataView.Column.
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. (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.
State	Auto Focus	When enabled, the control is automatically focused on creation.
Advanced	Min	Minimum value for the control. If the user tries to enter a value less than the min, it will auto correct to a value above. For instance, if I set a min value of 100 and I enter 1 into the control, it will add two zeroes to be 100.
Advanced	Max	Maximum value for the control. If the user tries to enter a value greater than the max, it will auto correct to a value below. For instance, if I set a max value of 1000 and I enter 9999 into the control, it will correct to 1000.
Advanced	Step	Specify the increment/decrement value. Used in conjunction with the spinners property. (Fig. E)
Advanced > Format	Style	Doesn’t work.
Advanced > Format	Currency	Doesn’t work.
Advanced > Format	Currency Display	Doesn’t work.
Advanced > Format	Minimum Integer Digits	Doesn’t work.
Advanced > Format	Minimum Fraction Digits	Doesn’t work.
Advanced > Format	Maximum Fraction Digits	Doesn’t work.
Advanced > Format	Use Grouping	Doesn’t work.
Advanced	Spinners	Enable increment/decrement spinners on the control. (Fig. E)
Advanced	Auto Correct	Auto correct… to what??? 42?
Advanced	Disable Change Value On Scroll	Lol, scroll didn’t work in the first place.
Advanced	Mask	Works to an extent… It will allow you to use masks to define leading zeros, number of decimals, etc., but you cannot change the separator format (like change the comma to a decimal). And if you make a decimal masked like an integer, you get a fun, giant tilde for the precise value! (Fig. F)
Advanced	LabelText SearchDesc	Set the label text for the search description field. Requires “Enable Search” to be enabled. (Fig. G)
Advanced	Ep Binding SearchDesc	Set the data binding to store the description value from the search. Format: DataView.Column. Example: ABCCode.String1_c. Requires “Enable Search” to be enabled.
Advanced	Nullable	Allows the value to be null. (Fig. H)
Advanced	Enable Search	Shows the search button. (Fig. I)

Figure A: Label Text

Figure B: Comments

Figure C: Alignment

Figure D: Width
Am I triggering anyone’s OCD with this one?

Figure E: Step and Spinner

Figure F: Mask

Figure G: Seach Label Text

Figure H: Nullable
Disabled

Enabled

Figure I: Enable Search

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Output Print Format

But for real… can’t figure out the secret sauce to this one either.

Wubba lubba dub dub!

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

PDF Viewer

A component which can show a PDF file inline in the application.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Label Text	Sets the label within the control. Doesn’t Show up anywhere.
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 form data to a DataView. This view will automatically be populated if the imported PDF form has form fields included in it. Format: DataView. (Fig. B)
Data	Selected Page	Tool tip says “Actual selected page”. Typing in a numeric value does nothing.
Layout	Alignment	Set the alignment for the control. Valid options are Left, Center, Right. Doesn’t work. I mean, it does something, but Right and Center throw the whole thing off of the screen.
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	Show in Toolbar	Disable to hide the entire toolbar. (Fig. C)
Advanced	Show Open File Button	Disable to hide the Open File Button. (Fig. C)
Advanced	Show Zoom Buttons	Disable to hide the Zoom Buttons. (Fig. C)
Advanced	Page View Mode	So, this worked for me initially to where single would show one page at a time and multiple would allow you to scroll down through them all, buuuut it stopped working.
Advanced	Show Paging Buttons	Disable to hide the Paging Buttons (Fig. C)
Advanced	Show Sidebar Button	Disable to hide the Show Sidebar Button. (Fig. C)

Figure A: Comments

Figure B: EpBinding

Here’s it in action from an old post: PDF Viewer Widget - #15 by hmwillett

Figure C: Show Buttons

[jkane (John Kane)]

Wow! You just rolled a nat 20!!

[hmwillett (Hannah Willett 🏳️‍🌈⚧)]

Gettin’ natty up in here.