Basic understanding of Kinetic based UI

Is the following a correct summary of the Kinetic UI works?

  • Forms are HTML based with javascript
  • Data passed between the form and the system utilize REST calls
  • UI Customizations will be handled by javascript running in the form
  • Instead of form controls (EpiTextbox, EpiGroup, EpiLabel, EpiGrid, etc…), Document Object Model(DOM) Elements (input, div, span, table, etc…) will be used
  • CSS will be used for DOM Element formatting

If so, would it be possible to make a modified version of the HTML file a form uses, then use redirection in IIS so that when an E11 form is called from another, ISS sends the modified one instead?

And could you create javascript files, stored in with the E11 files in IIS, that can be called from modified form.

You could add the following to <header> section of the html file.

<script src="https://myE11srever/path/myCustomization.js">
document.onload = function() {
    myInitializerFunc();  // a function defined in file myCustomization.js
};
</script>

(FTR - I only dabble in HTML and JS, so the above might be wrong, or far from the best way to do it)

Then any changes to myCustomization.js would be automatically applied whenever the windo is opened. This could be something as minor as adding an event listener to an input, and changing the background color depending on its value. A pseudo replacement for the RowRule customization used in the WinForms UI.

1 Like

Yes kinda… with a lot of caveats
So the end result is HTML, CSS and JavaScript but this is not how the forms are stored, constructed or rendered.
They are using something called MetaUI which basically allows you to construct a set of components (standard looking components, grids, dropdowns, layout etc) and insert them / remove them using a simple JSON Document.

So the definition of a screen will look a lot more like this

"layout": {
    "namespace": "App.AbcCodeEntry.AbcCodeForm",
    "name": "AbcCodeForm",
    "guid": "2dcd1674-5e34-4d98-b493-c75747027376",
    "caption": "ABC Code Maintenance",
    "viewType": "Apps",
    "height": 466,
    "width": 1440,
    "prefetch": false,
    "components": [
      {
        "parentId": null,
        "id": "pcgLandingPage",
        "sourceTypeId": "metafx-panel-card-grid",
        "model": {
          "guid": "2b182662-6b8b-47cc-b879-afdc05a5f291",
          "title": "ABC Codes",
          "autoFillContainer": true,
          "expanded": true,
          "customizable": true,
          "personalizable": true,
          "disabled": false,
          "readonly": false,
          "hidden": false,
          "gridModel": {

And any customization / personalization will just be another JSON document which supersedes the native one and gets applied in layers. Then all those layers are collapsed together by doing a DIFF

(Overly simplified explanation)

That JSON document is pushed into the MetaUI engine and it renders the UI for you, the nice thing about this is that any customization or personalization are just the DIFF between this and base and can easily be layered on.

The data passed between the forms and the server are done via REST calls

As part of AppStudio there is a component that allows you to embed an IFrame (with another URL) and that IFrame can also “subscribe” to changes on the root (master) view.

So for example if you make a web app which looks and behaves differently than native Epicor using whatever technology you want, you can then “customize” the Epicor screen and Embed your App within it, this means that it can also receive your active Epicor Token, Page, Record and Session Information.

So your Application would receive via URL parameter the current Token which would then allow you to use that in your app to make further requests into Epicor using REST.

Event Listeners, Row Rules etc are all added to the customization via AppStudio (which just generates JSON applied to a MetaUI Layer)

13 Likes

Wild. Have you seen any examples of this or done anything with this functionality yet?

1 Like

Bump. Super curious to see this in action as well

1 Like

I’ve made a few examples to test it works pretty well. I’ll see if I can demo something later.

1 Like

Cool, that would be sweet to see!

As for the UI customization that @ckrusen is talking about, we used to write in c#, what language do we use now?

There is no code its all drag and drop and selections. Very minor code is JSON and C# if its configurator.

Okay

WOW… I think I will need a bit of training class on the subject in order to transform my 5000 lines of c# code added functionality from order entry screen… into version 11 order entry… :wink:

plus the others forms… I fear it would take me months !!! if not years!

Cant wait for the demo !

thanks
Pierre

1 Like

Here’s a quick and dirty demo of this very cool feature! Of Kinetic 2021

NOTE: We are part of the Controlled Release program which is why we have access along with the Cloud Pilot folks

13 Likes

So in theory, if we wrote a custom UI for something like Quote, for example, we could be able to use the user context of the customized form to login to the custom app this way? I am trying to wrap my head around how that would work, versus having a front end app, back end API connected to Epicor, then embed the front end into a form.

You can also pass in dynamic data into the widget via bindings

Right so if you write a custom app that does… whatever

Makes a Duck Dance for Every Dollar on a Sales Order

You could write that app in such a way that it takes the Token and Session Information from the URL Parameters and uses that to authenticate the Epicor calls.

Then you’d embed that in say Order Entry

And it would automatically pass in the Token, Session and Current Order, then your App would query epicor via REST using the given token (same session) and make the duck dance without you having to re-authenticate or ask the user to login inside your web app./

This basically means that although you don’t have custom code access in the UI any longer you can write very complex components in whatever custom language you want and just embed them into the epicor application.

You want a google map that traces a route between you and the current customer,… you can do it this way pretty trivially and it looks and behaves as if it was part of the current application.

3rd party Web App that wants to write something that would “integrate” with Epicor this way would be very cool. Say you contract with xxxxx.coolapp.com and they “integrate” into Epicor for you… say document management system. You could then display those documents directly in the epicor app by simply dropping this widget and passing in the key arguments.

3 Likes

For example we currently hace a customization that takes Shipping Data and displays it on an interactive calendar (HTML Angular App) I am actively working to convert this customization into a Kinetic App via this widget.
Right side is an embeded Chrome Widget (in Epicor Classic) that takes the data from the Left (Epicor Dashboard) and renders it all in a calendar. So our Shippers can have a visual calendar of when each order is due to be shipped and they can adjust (drag and drop) those arounds around in the calendar.

This can’t be done with native epicor but it can be easily done with an embeded web app, funny thing is the web app doesn’t have any connection to epicor or the ability to talk to Epicor at all. It just receives data from the URL which is an array of data coming from the dashboard.

4 Likes

Teach me your ways lol

2 Likes

haha, what exactly you want to learn? I can do a little how to do on this if you’d like at some point… going live on Monday so a bit stressed right now but I should be able to. Maybe I’ll talk about this at the Insights Panel…

1 Like

What are you going live on?? For some reason I thought you said you weren’t going to 10.2.700 (maybe you were just talking about using Kinetic), and that you were waiting for later versions of 11.

Thank you for the video Jose :pray: That demonstrated the ability. Super cool.

1 Like

For me the front end piece is a bit of an uphill battle for me, since I don’t have a lot of experience with HTML, CSS, JavaScript, etc. The typescript component class level is a little more familiar, but getting into the HTML side is daunting, which sounds silly since that’s arguably less complex, but nonetheless unfamiliar.

Would love to build out a purpose built UI for our process, Quote and Order management in particular, with a easy to use Angular app and tie it into Epicor for seamless session and user management.

We have a Go live for one of our plants (migrating to Epicor from Green screen)
10.2.500.21

We won’t go to 700, straight to Kinetic 2021 later this year if we can manage it.