Haven’t heard anything about it, so it’s unlikely.
1 Like
Would be happy if there were more colour options.
Newish to App Studio wondering if this is possible
When a row rule triggers (e.g., to highlight an error), is there a way to also visually indicate the tab containing that row? For example, in the Job Closing screen with Ops, Materials, and Parts tabs, a row in the Materials tab may show a warning, but there’s no visual cue on the tab itself. Users won’t notice the issue unless they open each tab.
Is it possible to dynamically style the tab (color or icon) based on row rule states?
Sorry this is a bit long but it is possible.
As Brian has mentioned before, Kinetic is built on browser tech and many of the “expression” properties in App Studio are evaluating Javascript. Whether that is good or bad, that could be debated but it does allow for some customizations if written correctly.
I’ve managed to hook into that browser tech and Epicor Functions to give us some more flexibility.
We are currently uplifting some classic screens and found that there is just not parity with Kinetic yet. Like simply highlighting the required fields like classic allows, which many of user use and love. With Kinetic, we’ve also lost what computer name and layer name is making calls to the app server. We used these call context properties, among other things, to determine what resource group should be defaulted for the Work Queue.
I’ll eventually upload the Functions and some instructions on how to use it but for now here is a sneak peak on what it can do.
Here we used our custom css to extend the part description textbox so we can actually see our descriptions.
In classic, we were able to customize the size and colors of the grid rows. That can’t be done with stock Kinetic.
After I first started, I was curious how far I could take it so I played with another feature that is missing in Kinetic that exists in classic, charts.
This is done with all the CSS/JS stored in Epicor Functions and not using the Website Widget.
14 Likes
It’s been discussed from the design team, that they will probably sandbox or disable these hacks in the future, so don’t get too excited.
I really don’t see a problem though, if you are relying on client security, you have no security.
I’d rather see a sanctioned way to put some js and css in there, instead of taking my toys away.
8 Likes
You tease! 
Looking forward to seeing the how-to.
I hear you. I was in a pickle if I should have posted it or not.
But with the defeat of the 2025.2 Boring Edition idea (to get Kinetic stable and back to parity with classic which has since been deleted BTW), I felt maybe I could relieve some developer/IT stress to help more users adapt, even if it’s temporary.
There will obviously be a disclaimer of your point when I get to posting the items.
1 Like
Because, if nothing else, it’s neat!
And it gave me something fun to do today to replicate it.
5 Likes
$0.02: It’s a js app. Client side functions should be extensible at own risk.
ie: split, join, convertDelimitedListToSql, myJsFunc
1 Like
So here are the goods. Please refer to @klincecum 's Safe Harbor notice earlier in the thread.
The zip contains a kinetic app, I used to tune the logic, and the Epicor Functions. There are notes on the UI Functions libraries that explain what should set for the condition expression (that does the magic). Be sure to give your company access to the UI functions before running the kinetic app.
The UI libraries are split between JS and CSS that call unpublished internal functions.
For using CSS, you can approach it a couple of ways.
-
Call the Epicor Function and then the condition element to either load or unload the CSS. This is a simpler approach if the CSS isn’t going to be toggle often. Like if you just want to give the option to toggle required fields.
-
Store the loading and unloading logic in TransView fields and then use those fields in the condition element. This would just save on making server calls if the CSS will be added/removed often. Like if you need to toggle CSS based on a field/row change.
This is the basic routine to Load CSS:
This is the basic routine to Remove CSS:
This is the basic routine to Load JS:
This is the basic routine to Run JS:
Once JS is loaded into the page, it can’t be removed (until the page is refreshed). So there is no unloading function.
The expression to load JS is a bit different because I couldn’t find a way make the condition like the syntax when it all came back in one string, like the css loader does.
The JS can be a bit tricking to both write and store in a function. When using a verbatim string, it doesn’t like the JS key words (let or var) sometimes.
Also when trying to use the condition to load the JS, it doesn’t like double quotes in the code, it throws a syntax error. It must do some quote escaping. So you will notice I used backticks instead.
Both CSS and JS doesn’t have to be stored in a function. You could create a different function, similar to the StyleLoader, that inserts a style or script tag that points to a url. I just didn’t make it that far. Storing it in Epicor can make it easier to use in test/dev environments without having to be dependent on another server.
KineticCSSJS.zip (13.6 KB)
7 Likes
Very cool thanks for sharing.
Can you inject js such that it’ll expose the kinetic root object? Like window._khp = whatever ?
1 Like
If it is publicly accessible, in theory you should be able too. But I think there would have to be really good reason to do so.
I originally set out to find a solution for highlighting required fields (that didn’t involve copy and pasting CSS into a StyleBot chrome extension on users computers) and it kinda evolved into something that can be pretty powerful but also could become a dangerous slippery slope if not kept in check.
So yeah, I would advise using it sparingly.
2 Likes
Thanks for sharing this write-up! I hope it inspires some neat creations in the future.
It’s super interesting to me to see the different ways of doing things.
As a brain exercise, I wanted to see if I could do the required field highlighting before you posted your solution and I ended up with a wildly different method!
I also feel the burning need to put that confetti trigger on every single save button in Kinetic now.
4 Likes
I’m tempted to put it in for when we win a quote, and warn absolutely no one.
5 Likes
Honestly, the confetti was inspired by Salesforce. They display it randomly when a case is closed. And it is still exciting each time it shows up.
I had tried messing with the DOM and trying to add styles specific to elements but it just didn’t feel as clean. I felt like CSS overrides seemed to be a bit less intrusive to the core application. And I already had the CSS in my Stylebot extension (thanks to one of your prior posts), which made it easier to get working.
But I do like the simplicity of your code to find elements. I can see that coming in handy. For example, when working with the grid to style grouped rows (like in Fulfillment workbench when an order is 100%).
I would say this type of functionality bridges the gap where in classic, we had row rules with a custom action to style controls to our specific needs.
2 Likes
1 Like
Add this to the confetti 
3 Likes
Not to feed the monkey but…
4 Likes