Modern UI (2023r1+)

  • 30 August 2023
  • 3 replies
  • 495 views

Userlevel 6
Badge +4

With Acumatica 2023r2 on the horizon, I’m curious who has been taking advantage of the ability in 2023r1 to begin playing with the Modern UI that uses TypeScript.

In May, my friend Kyle Vanderstoep introduced us to getting started with the Modern UI via the Acumatica Blog.

Developer Preview of Acumatica's New Modern UI | Acumatica Cloud ERP

Then, in June, I followed up with a post showing my work to convert a simple screen from the CMMS-Lite project into the Modern UI.

"Hello World!" - Converting a simple screen from the Classic UI to the Modern UI | Community (acumatica.com)

My current screen layout that I am learning is a Preference screen with tabs including assigning the approval map.  I have another friend that recently showed me his work on setting up a simple processing screen, and I hope that he will feel comfortable to post about that soon on the community forums.  However, a quick search on the forums, and I’m not really seeing much activity posted yet.  The last couple of months has been really challenging for me to spend the time I planned, but I hope to get back into trial and error, experimenting, and generally trying to gain more competency in the coming months.  After all, I have a lot of reasonably complex custom screens to convert as the roadmap brings us closer to full release of the Modern UI.

If you have stories to tell about your journey to learn how to build your screens in the Modern UI or have interest in actively participating in a group of people willing to put in some elbow grease to learn it collaboratively, please keep the conversation going by posting here.  If we gain enough traction, I might be able to setup a biweekly meeting on teams or discord for each of us to exchange insights on what we are learning in hopes of leveling up the general competency of the community.  To the best of my knowledge, none of us are experts yet, so there’s time to “get in on the ground floor” in helping make our community stronger on this topic.


3 replies

Userlevel 7
Badge

Thank you for sharing and reaching out to the community @Brian Stevens!

Userlevel 6
Badge +4

Having trouble getting your changes to appear in the browser after you update your typescript files and “getmodules” and “build”?  Kyle had suggested that we go into Apply Updates and Reset Caches, but that seems to be only half the story.  What I found is that I spent a tremendous amount of time trying to fix my typescript files which must not have compile ok because I wasn’t seeing the updates in most cases.  Then a few days later, I’d come back and see the changes DID apply.  That got me thinking that it must be time to hunt for answers.

The issue comes from caches, but the problem is two-fold.  “Reset Caches” does fix the server side, but the screens are cached on the client side as well.  After a bit of digging around google and stack overflow, I found the solution that worked for me!

It turns out that you can disable the client side caching pretty easily.  I use Edge, but I’ve read the settings are in Chrome also.  In Edge, open DevTools by pressing F12.  Click on the Gear icon to open settings.  In the Network section of Preferences, check the box for Disable cache (while DevTools is open)

Now, just leave DevTools open on the side of your browser as you refresh.  After your npm run getmodules and npm run build, still remember to go to Apply Updates and Reset Caches.  Then refresh your browser for DevTools to pull the content fresh so that you can see the changes.  This isn’t quick, but it’s far better than wasting days trying to understand what you did wrong in the typescript… only to find out that you didn’t!

And now, for a sneak peek and what I finally can finally SEE!!!

 

 

Userlevel 7
Badge +8

Fantastic read.

 

I speak with the perspective of a consultant when I say it is pure excitement to see the UI changes and some of the capabilities they will bring.  Understanding the challenges from the developers point of view and even picking up some specifics of the issues you are facing gives us a more holistic view. 

 

With the upcoming UI changes it will be imperative to plan our post-customization tests in a more stable and helpful way, posts like this make that a more obtainable goal.  

 

 Thanks @Brian Stevens for sharing. 

Reply


About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved