https://netsuiteprofessionals.com logo
Join SlackCommunities
Powered by
Against my better judgement, I'm going to attempt ...
# suitescript
d
Against my better judgement, I'm going to attempt to implement a fancy UI in NetSuite. Any recommendations on a UI framework? Any gotchas I should worry about?
k
Tried with React, works pretty well. Only advice is that if you don't use a store management and you don't have experience with the framework it can lead to messy code
d
store management
?
a
I would go with Angular or React, Angular would require a middle man service/server to handle routes and React would not, as far as I know.
k
redux-toolkit for example
a
You can also create your own thing with a Suitelet and HTML, using the render module you can load third party libraries from CDN without any URL parsing needed...(bootstrap, jquery, etc)
d
@alien4u, that's really what I'm looking for. (CDN, etc). Something lightweight where I can author the HTML.
a
@darrenhillconsulting There is no need to encode or decode or parse... using the render module you can avoid all that...
d
Interesting. Thanks. I'll play a little today
a
This example is for a beforeLoad event but easily adaptable to a Suitelet.
Untitled.js
@darrenhillconsulting ^^^
👍 1
s
We do custom apps like this with Angular. No middleman is required.
d
I'm going to try and get this inside netsuite
a
@Shawn Talbert Would you mind to share how you handles routes when using Angular?
p
All this talk sounds really interesting. I tried something similar before using HTML but the Bootstrap and JS broke the other native NS UI. I'm keen to see how this works out for you all
d
Agreed @PlanetJupiter, I'm sceptical. I'll let you all know what I see
d
We use VueJS for our apps.
p
@darrenhillconsulting I wanted to have a nice designed Customer Dashboard using bootstrap but have up hope!
🤞 1
k
@PlanetJupiter did you added the custom html in the dashboard or with Inline html field type?
p
@Kyriakos Zisopoulos yes, probably not the best way to do it but that was all my limited dev skills could do at the time
k
Yes that breaks native interface for me as well. A timeout before loading custom ui sometimes solves but I also never found a real solution
s
@alien4u our Angular apps are doing client-side routing so there's nothing special - it's just angular running in a browser like any other app (NetSuite isn't involved in the routing). NS is just the API backend. Angular app is in the File Cabinet.
No need to be skeptical @darrenhillconsulting - we've been doing variations of this for a decade.
a
@PlanetJupiter An entire customer portal was built with Angular and is running for a big company handling more than 500 customers, no issues...
👀 1
d
@Shawn Talbert, scepticism comes from the fact that these frameworks typically render the whole HTML page, where as, I need these to render within NetSuite (Suitelet form that shows the NetSuite menu). So, right out of the gates, we'll have css-collisions, <html> and <meta> missing, etc.
s
iframe it
d
I can see already that trying to render the 'cheatsheet' from Bootstrap breaks all the NetSuite nav's, etc.
s
there are two flavors we encounter - one, like you describe where the app takes the entire screen (which is sometimes exactly what you want), other is when you want to preserve the outer NS navigation and so forth. For those we iframe in the webapp
a
@Shawn Talbert But you are talking about Angular SPA right? when we built something mid size with multiple angular apps(files) and you do a built of your angular the routing between the different apps is dynamically generated, considering hierarchy and all that, how do you maintain 10 different angular modules in the File Cabinet and dynamically update all the dynamic re-generated paths on each build/packing?
s
Most of our apps are monolithic and still perform drastically better than native UI while still keeping deployment simple. However, depending on client licensing you don't need to have dynamic paths (if you're referring to the urls generated by netsuite?)
p
@alien4u and that customer portal sits within Netsuite without breaking the UI, loading Netsuite data? Doesn't angular act as a separate app, and we'd have permission issues?
w
React + Material UI here. Weirdly enough, I've started seeing that the items in the Netsuite menu's are re-ordered when you are on that page. Pretty fun to tinker with. We bundle everything in one HTML-file and put the contents in an inline HTML-field in a suitelet.
p
@Watz yeah, we found the UI nav broke too. Some items re-ordered, and some simply missing! Your looks good.
a
@Shawn Talbert When you use Angular Routing in a no-monolithic design, meaning no SPA, then you would run into problems with NetSuite because NetSuite URL paths are not RESTful compliant.
@PlanetJupiter When designing this Customer Portal fully integrated with the company WebSite we don't have the need to worry about NetSuite UI, this customer portal is fully integrated with NetSuite and is fully hosted in NetSuite with the exception of the routing portion, but it has it own design that matches the company's website design, no NetSuite UI is needed or accessible for this particular project.
s
Same as @Watz for me, we've built material ui/react based tabs on netsuite record pages and suitelets. Some suitelet also has the builtin/native NS api for dropdowns fields at the top with no issue
d
So, it seems there's several options. LOL. Who's gonna be the first to right a blog post on it?
w
@Sandii have you done anything useful on record pages that you can talk about?
c
I’ve done many of these both as standalone SPA’s or embedded components on the native forms. I typically use Vue but React or Angular would work just as well
m
Another vote for Vue.js. It sounds like the direction NetSuite is going with their native SPA support will be Oracle JET
💯 1
👀 2
d
@michoel, if it were you, would you try using this Oracle JET framework now? Or stick with Vue.js
s
We've done one or two apps in Vue, but I still feel Angular is most closely aligned with how other suitescripting works, especially if already using TypeScript.
d
You had me at 
TypeScript
@Shawn Talbert
🙂 1
m
@ExtendApps Inc. I would stick with Vue or another more popular framework for now. As I see it the advantages of using JET would be a component library with the "redwood" design that NetSuite is moving towards, and a better out of the box experience - neither of which exist at the moment
d
Is there any literature on the upcoming redwood UI? Perhaps I can hold off this customer's need for custom UI until its released
s
also looks like that article linked above was originally from 2017...
m
@darrenhillconsulting I heard it mentioned in one of the suiteworld sessions, I'll try find the link. This came up in Google, I guess from last year's SuiteWorld. I have no clue about timelines. NetSuite has been talking about SPA support for a couple of years already.
@Shawn Talbert yup, I tried following that yesterday and got some ugly errors. Here's a better link

https://youtu.be/wIxhIZ5OHhY?t=5190▾

From 1h26m it's mentioned, and then demoed a couple mins later
message has been deleted
d
So, that'll come 2025?
😂 2
m
If we are lucky
2 Views
Open in Slack
PreviousNext
Powered by