Documentation for setting up the development environment for the Modern UI

  • 6 January 2024
  • 5 replies
  • 134 views

Userlevel 6
Badge +3

Is there any documentation on how to setup the dev environment for the Modern UI?

The only thing I can find is the PDF of the slides from Andrew Bulanov’s DevCon 2023 presentation.

- Install Node.js of the version 16.14 or higher
- Open a command prompt window, change the directory to FrontendSources folder of the site
- Execute npm run getmodules
- Execute npm run build-dev

I installed the latest version of Node.js from the Node.js web site.

I executed the getmodules command.

I also ran this command to make sure typescript was installed: npm install -g typescript

When I run the last command I get a lot of errors.  Maybe these can be ignored?

Using Node and Typescript is new to me and I was hoping there was a cheat sheet from Acumatica on how to get started.

 


5 replies

Userlevel 2

hi @Joe Schmucker  - even I got the same issue using the documentation while trying to Execute npm run build-dev
 

any help is appreciated  
CC: @rakeshe45 

Userlevel 6
Badge +3

@ramakrishnan91 

I submitted a case a while back.  I was asked to try 24R1 preview.

I was able to get it to build on this version without any extra fuss.

I am only able to make tweaks to existing screens created by Acumatica.  I have no idea how I will create the html and typescript files for my custom screens.  I’m praying there will be a tool to create them for me.  

 

Userlevel 2
Badge

@Joe Schmucker or anyone really… Do we know; are we supposed to have the ability to generate custom screens in the modern UI at this point, or are we limited to playing with those that come default under FrontendSources?


Reading the documentation, they use all default screens in their examples, so its unclear to me if they are instructing us only how to recompile default screens after modification or telling us we can do this with any screen and they just use default screens as examples. 

 

After dealing with a “cross-env is not recognized” error using  npm install --save-dev cross-env  I was able to get   npm run build-dev -- --env screenIds=|custom screen|  to run successfully with no errors, but it didn’t generate the FrontendSoures files for my custom screen. 

 

I very well may be missing something, but I thought it worth asking the question before I burn time on another 100 derivatives.  

Userlevel 6
Badge +3

@martinxfe I’m still wondering that myself.  I was hoping that Acumatica might make a tool to generate the frontendsources screens.  If I have to create those files myself for my custom screens for the 30+ applications I’ve done, I’m pretty screwed.  I don’t have the knowledge to understand what I would need to do to create those.

Userlevel 2
Badge

Even if we did have to build the html and ts ourselves, at least there is documentation for that. But there’s still the issue that when you attempt to switch a screen to the Modern UI, the site map is locked down to search for |screenID|.html in the ./Scripts/Screens directory before it ever references the ./FrontendSources files.

The default screens all have corresponding html and js files in the ./Scripts/Screens directory, but there’s no documentation that I’ve found that explains how to generate these for custom screens, which tells me either we’ve not yet been provided with this option yet, or else it’s something that is supposed to be handled programmatically, and I’ve simply botched the deployment. 

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