Did you miss the Community Meetup - Distribution Show & Tell: Side Panels - Tue, Mar 15?
Check out the recording!
Engage with other Distributors in the Acumatica Community with the new Distribution Show & Tell where Acumatica customers, partners, and Product Management staff share different ways they use Acumatica, sneak peaks into upcoming features, discussions around vertical markets, and trends in the industry. Each meetup will have a topic with individuals prepared to share, time allotted for participation from others who have joined, Q&A with each person who has shared, and polls on various topics to get your feedback. Show & Tell will be informal and interactive, so come ready to share your camera and engage: participate in the discussions or just listen in.
The first Distribution Show & Tell topic is SIDE PANELS, one of my favorite features of the Acumatica platform. See how Acumatica Community members have used side panels to track shipments, view PDFs, see if the Finished Good on the SO can be fulfilled on the requested date (exploding a BOM into multiple levels), and much more. Also get a sneak peak of the requirements for some of the pre-defined side panels in Distribution modules to be included out of the box.
-Debra Mignola, Director of Product Management, Distribution
Page 1 / 1
Sorry I couldn’t make this session. In Justin’s presentation, he was able to click between Sales Order lines and have the side panel update. In my previous testing with side panels, I was not able to get this kind of functionality to work. Can someone let me know how to do this?
For example, if I want to load some information specific to a line item in my Sales Order (i.e. stock status for each branch), how would I do that?
Ok turns out I just needed to watch the video. That is great solution….thanks Justin. Virtual fields!
If anyone knows how to contact Justin...would love the code for the line level updating (i.e. Javascript, etc)...
Hi @jknauf - would you be able to assist @rosenjon ? Thank you!
It was a wonderful section. I am just wondering is there anyway to get the snapshot used for the demo ?.
Hi @bigil ,
Thank you for feedback about the Community meetup about Side Panels.
Out-of-the-box Side Panels are being targeted to a future product release. We are currently in the process of gathering and refining business requirements. We presented a prototype which we have been using in the requirements discussion to elicit and validate requirements. This prototype is not a final design and is subject to change while we explore opportunities to make product improvements.
Here is an example of the Side Panels that were shown during the demonstration. These would need to be configured in Generic Inquiry.
Sales Order Side Panels prototype:
Shipments Side Panels prototype:
Invoices Side Panels prototype:
Another idea that I think would be useful for the manufacturing/retail customers.
On the sales order screen have a side panel with the following driven by the highlighted sales order.
Related Production Orders w/ Status
Related Purchase Orders w/ Status
This way sales can quickly view the status of all of the production orders and purchase orders associated with their sales order.
Hi @Dana Moffat -
2022 R2 looks like it has some cool updates for side panels. I’m just curious if the “line detail” side panel might be included in this release? The idea is that you would have a panel than can update based on whatever Sales Order line you have currently selected (or Purchase Order line/Purchase Receipt line, etc). Maybe that side panel could show stock status for that item, lot availability for that item, pricing details based on volume/customer, etc, etc.
I have enough experience working with Javascript and Acumatica now that I could probably build a version of this myself. But I’m curious whether it’s going to be in an official release soon...
Hi @rosenjon,
Thank you for visiting this Community page and exploring Side Panels.
We have introduced some summary-level side panels for transactional forms in the 22R2 release.
We have line-level Side Panel capabilities on our product roadmap targeted to the future. Framework changes would be needed to support this generically. We have gathered and identified the line-level Side Panels that we would love to build, and your suggestions match what we have.
Some of our Community members have been quite creative in their solutioning. In the Community Meetup video that was recorded, Justin walks us through his solution and how he was able to pass line-level information to a Side Panel. If you do build something, please reach out - i would love to see what you come up with.
Thanks,
-Dana
Thanks @Dana Moffat.
I think Justin’s idea of utilizing virtual fields is a pretty reasonable approach to this. My only question about that approach would concern what happens if the user has multiple browser windows open, for example. I don’t know if the virtual field is tied to the user session, or the user login, or globally to the entire site (in which case you might have to manage state on a per user or user session basis, requiring a lot of hardcoded virtual fields potentially). Perhaps Justin would be willing to publish some reference code when he has a chance, so we can all get a look at the specific implementation of this approach.
I recently built a product integration with Acumatica utilizing Javascript’s window.opener feature, which I’ve posted about previously. I think this could potentialy provide a different way to do this that doesn’t require any read/write synchronization between the panels (virtual field must be written to before it can be read by the panel). Alternatively, this would also be a good use case for SignalR, which Acumatica is making pretty heavy use of these days in other areas of the product. So if I were bulding this, I would probably go window.opener or SignalR as the approach for synchronization, which would avoid having to read/write variables to synch the panel (and might also be able to avoid completely reloading the panel to grab new data).
I will get around to prototyping this in the next month or so most likely, so I will post back when I have something to show.
@rosenjon would love to have a guided tour if you prototype something - feel free to reach out to me and we can do a one-on-one.
thanks
-Dana
@Dana Moffat Sounds good. Happy to give you a walkthrough when I have something ready.
HI @Dana Moffat -
I don’t have something ready to demo yet. But I thought I would post this here as some “stub code” that is a generalized approch that I think will work here. The side panel is loaded into the Acumatica window in an iframe with the id _layer_cont. Since Acumatica’s iframes are all the same origin, and loaded in the same page, we can use Javascript to synchronize information between the various panels.
The tricky part is figuring out how to tell the side panel to do something when something happens in the main site/iframe. There are lots of approaches that will work, but one that I have been using recently in some other projects is called the MutationObserver API. This API allows you to tell the browser to do something when a change is made to another element on the page. Obviously, this would be useful in the side panel context, because we want to tell the side panel to refresh when a different sales order line is made active by the user (i.e. they click on it), for example.
Below is some stub code demonstrating how this works. So far, I have only run this in the browser console (I have not loaded it from a script I’ve put into Acumatica yet). This approach has allowed me to control, for example, what happens with the side panel tab when an action happens on the page (we can trigger an alert, etc). I have also been able to force the side panel tab to go to an external website, even though Acumatica doesn’t seem to support this at the moment.
The key functionality here is the mutation observer. By watching what happens to certain classes in the page (i.e. a certain sales order line acquires the “Active” class), then we can tell the side panel to load information specific to that item. This can be done without any backend synchronization of data, since we can used the observed elements to figure out what has changed and then make appropriate updates to the side panel.
You have to be a little careful with this functionality. If you target the observed elements with a narrow range of class names or ids, then it should be very performant. You just have to watch out for observing too broad an array of elements, or making your script do too many things when an event is observed.
I just thought I’d post this, since it will take a little while to get a fully baked example put together. It may be good food for thought for your developers though, if they are trying to make a perfomant version of updating side panels in relation to selecting a sales order line in the main window, for example.
let mutationCallback = function(mutationsList) { mutationsList.forEach((mutation, i) => { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { // handle class change if(mutation.target.classList.contains('active')) { alert('hi'); } else { alert('bye');
}
} }); };
let observer = new MutationObserver(mutationCallback); let config = { attributes: true, // attributeFilter: "style"], };
@rosenjon , thanks for post. Curious - what external website are you trying to access at the line-level? Are you trying to punch out to an online vendor catalogue and return information to the line? Some of our customers were able to link to external urls for shipment tracking (Fred showed this during his part of the show during the Community Meetup).
-thanks, Dana
@Dana Moffat Keep in mind that “external websites” may really be internal websites where we don’t want to program against the Acumatica framework. I already have one project where I am doing things this way. It’s not that we really want to take the user to some third party website (i.e. google), we just want them to use a webpage that is integrated with Acumatica, but not running on top of the Acumatica framework proper. There is a lot going on with the Acumatica framework, and so there can be bugs/code collisions from trying to run your own Javascript inside Acumatica, for example. Sometimes it’s nicer to have a nice clean webpage that runs your own Javascript, but can be loaded from within Acumatica. This is not currently a very easy thing to do in Acumatica, and it’s extra difficult with side panels.
I actually misspoke a little bit. The current side panels/GIs do allow you to go to an external website. But in order to do so, the link has to be against one of the records returned by the GI….for example let’s say you have a list of products, and you want the user to go to http://www.someexternalsite.com?productid=sodacan, where sodacan is an identifier returned by the GI.
I am in control of our server, so I can serve up webpages that are separate from Acumatica but on the same server, and this will not violate the same origin policy. That means that my custom pages will play nice with Acumatica. If someone is running in the cloud, they will not be able to do this, making it extra hard to use Javascript to redirect a user to an external site, even if they control that site.
Just to be clear, the MutationObserver feature I posted above has nothing to do with redirection to an external site. I was simply pointing out that I have been able to control the side panels in a more comprehensive way than is normally allowed from Acumatica, by using some Javascript techniques. The MutationObsever is generally useful for having something happen in a side panel, as the result of the user taking an action in another panel, for example the Sales Order line grid. There are other ways to achieve the same thing, but the MutationObserver is a simpler/more event driven way to react to other things that might be happening on the front end.
@Dana Moffat
Here is a rough demo on how users can make a no-code version of Justin’s side panel should they not have the requirement of line-level filtering. This was a helpful presentation, thank you!