Kinetic Control Compendium

[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.

[jkane (John Kane)]

[klincecum (Kevin Lincecum)]

This is the type of documentation and user annotations I’ve been looking for.

[josecgomez]

I’mma send them a bill for all of @hmwillett 's hours she’s spent on this. The upside is

a) now we have it
b) She has become an expert so our jobs are easier
c) winning!

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

@josecgomez

I’mma send them a bill for all of @hmwillett 's hours she’s spent on this.

[jkane (John Kane)]

Put it in the mail with Steve!!

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

PE Log Viewer

Tree view component to display Posting Engine logs in a hierarchical structure.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Label Text	Sets the label within the control. But does it, though? Narrator: It does not.
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 button to a DataView.Column.This should be from a dataview that holds PE Log info and needs to be bound to the GPostingUID column. Example: PELog.GPostingUID. You will need to create an event that sports a REST widget to populate the data in said DataView. (Fig. B)
Data	Svc	Enter Erp.BO.PELogViewerSvc. Do it.
Data	GetNode SvcPath	Enter GetNodeById. Do it.
Data	FindNode SvcPath	Enter FindNode. Do it.
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. 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.
Advanced	Enable Search	Enables the search bar on the PE Log Viewer. (Fig. D)

Figure A: Comments

Figure B: EpBinding

Figure C: Alignment

Figure D: Enable Search

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

Panel Card

Expandable container that groups related content.

Property Group	Property	Description
Basic	Id	Unique identifier for the control
Basic	Title	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.
Layout	Minimum Width	Sets the minimum width the panel can shrink to when the page is in Flex Layout Mode. (Fig. D)
Data	Flex Layout	To create custom, responsive control layouts instead of column-based layouts, set the card to Flex Layout Mode and use Group Box and Flex Container controls within the card to organize content.
State	Personalizable	If true, a user can personalize this component(hide/show)
State	Customizable	If true, a user can customize this component in child layers
State	Hidden	Hides the control from view.
Advanced	Enable Action Menu	Indicate if the action button should be displayed at the top of the panel card. (Fig. E)
Advanced	Auto Fill Container	Indicate if panel card should automatically fill its container. (Fig. F)
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	Enable Fullscreen	Indicate if the full screen button should be displayed on the panel card. This gives you an extra, hideable container for goodies. (Fig. G)
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. H)
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. I)
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. J)
Advanced > Action Data	Disabled	Disables the tool. This still seems to show the click animation, but the event doesn’t fire. #SuperGoodEnough? (Fig. K)
Advanced > Action Data	Add Divider	Adds a divider below the menu item. (Fig. L)
Advanced > Action Data	Sequence	Set the numeric sequence of this item in relation to the other items. (Fig. M)
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 > Provider Model		I’m not really sure what this is for. I guess you can set it to populate a dataview on expand and then populate any fields on the screen with that data?
Advanced > Provider Model	providerModel.description	Set the description for this provider model. Used as a comment to describe the view options (which don’t exist!) for this provider model.
Advanced > Provider Model	providerModel.svc	Identify the REST service that provides the data. Example: Erp.BO.PartSvc (Fig. N)
Advanced > Provider Model	providerModel.svcPath	Identify the REST method that is to be called to get the data. Example: GetList (Fig. N)
Advanced > Provider Model	providerModel.tableName	Set the name of the table that holds the row(s) of data when the REST call returns. (Fig. N)
Advanced > Provider Model	providerModel.EpBinding	Set the name of the view that is to be provided with the data from the server call. (Fig. N)
Advanced > Provider Model	providerModel.outParamName	Set the parameter name that holds the row(s) of data when the REST call returns. Example: returnObj. (Fig. N)
Advanced > Provider Model	providerModel.restParams	Set an object composed of key value pairs that define the REST parameters that are stent into the service call. Example { "whereClause": "PartNum = '10008'"} (Fig. N)

Figure A: Label Text

Figure B: Behaviors
Mental Issues.

Figure C: Comments

Figure D: Minimum Width

Figure E: Enable Action Menu

Figure F: Auto Fill Container

Figure G: Enable Full Screen

Figure H: Description

Figure I: Icon

Figure J: Add to Primary Toolbar

Figure K: Disable

Figure L: Add Divider

Figure M: Sequence

Figure N: Provider Model
A’ight, so it does execute this at runtime, but only at runtime unlike the other provider models that fire on panel expand.

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

I’m taking a hiatus from these shenanigans. #VacationTime

[Mark_Wonsil]

The PanelCard was a big one too. Enjoy luggage surfing!

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

Realistically, this will be me. Flight boards at 6am tomorrow.

[josecgomez]

@hmwillett

Realistically, this will be me

That’s a good way to get rug burn! Head up! Chica!

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

This ain’t my first rodeo. I’ll be on the moving walkway.