Can I add Side Panel with Params coming from SO Lines?

I actually discovered a way to do this. I’ll list out the steps it will take:

Part A:

1. Create virtual fields on the SOOrder DAC that correlate to the SOLine Parameters you need
2. update these as lines are selecting/updated using event handlers
3. pass these fields as the params to your side panel actions as you normally would

While It seems like this alone would work, the side panel actually doesn’t refresh when a new SOLine is selected. We’re going to have to get creative to resolve this issue.

Part B:

1. Create an additional virtual field on the SOOrder DAC to keep track of which side panel was last opened (I will explain how to track this later). I use a string field to do so. This is especially important if you have more than one side panel on your screen.
2. Next you want to define a standard graph action that will update this field. Make it Visible = false, since you don’t actually want this button to show. We will call if from behind the scenes later. This is the method I use:

   public PXAction<SOOrder> SidePanelCallback;
   [PXButton]
   [PXUIField(DisplayName = "SidePanelCallback", Visible = false)]
   public virtual IEnumerable sidePanelCallback(PXAdapter adapter)
   {
       SOOrder doc = Base.Document.Current;
       if (doc == null) return adapter.Get();
   
       var docExt = doc.GetExtension<SOOrderExt>();
       docExt.UsrSidePanelDetailParamsRefresh = adapter.CommandArguments;
   
       return adapter.Get();
   }

   *Note: docExt.UsrSidePanelDetailParamRefresh is the variable I for the previous step

3. Now you need a way to trigger your code when your side panel actions are called. TO do this we’ll use the following JavaScript

   function commandResult(ds, context) {
       var ds = px_alls['ds'];
       switch (context.command) 
       {
           case ('JustAction'):
               ds.executeCallback('GraphAction', 'parameter value');
               break;
       }
   }

   You want to replace JustAction with the internal name of your side panel action. it should look like this: NavigateToLayer$DB000028
   where DB000028 is the target ScreenID for your sidepanel. If you want to make sure your actions follow the same naming convention, you can check it by adding breakpoints and checking with the debugger.
   You should replace GraphAction with the name of the graph action you created in the previous step. In our case SidePanelCallback
   Then finally for the parameter value pass whatever you’d like to use to identify the opened side panel. This will be stored in UsrSidePanelDetailParamRefresh, or your equivalent.
   You can create a case statement for each side panel you want this functionality for, so you only have to do all this once per graph!
   Then finally, attach your script to the client event ‘commandPerformed’ on your data source.

4. Next we will define another graph action to do the actual refresh of the side panel. Mine looks like this:

   public PXAction<SOOrder> SidePanelRefresh;
   [PXButton]
   [PXUIField(DisplayName = "SidePanelRefresh", Visible = false)]
   public virtual IEnumerable sidePanelRefresh(PXAdapter adapter)
   {
       SOOrder doc = Base.Document.Current;
       if (doc == null) return adapter.Get();
   
       var docExt = doc.GetExtension<SOOrderExt>();
   
       Dictionary<string, string> parameters = new Dictionary<string, string>();
       string[] args = adapter.CommandArguments.Split('*');
       switch (docExt.UsrSidePanelDetailParamsRefresh)
       {
           case ("Component Inventory"):
               parameters.Add("Kit", args[0]);
               parameters.Add("SiteID", args[1]);
               throw new PXRedirectToGIRequiredException("Component Inventory", parameters) { Mode = PXBaseRedirectException.WindowMode.Layer };
       }
       return adapter.Get();
   }

   **Note that for my use case the parameters I am passing cannot contain the character ‘*’, so I use it as a delimiter**
   And again, you can define as many case statements as you need for each of your dynamic side panels.

5. And now finally we need javascript again to call this action. Using event handlers are too slow for this type of refresh, they will always pass the old SOLine parameters. IF you know a way to avoid javascript here, I’d love to hear it, as doing callbacks like this does have a heavy overhead. Because of this, be careful where you attach this script to, I actually attach it to the grid’s RowSelectorClick client event rather than AfterRowChange for this reason, and train my users to select rows in this way so we don’t impact the rest of the company. I’d recommend this if this is a high traffic screen such as SO301000.
   Anyway, here’s the javascript:

   function Side_Panel_Refresh() {
       px_alls["ds"].executeCallback("SidePanelRefresh", this.func.caller.arguments[2].row.getCell("InventoryID").getValue() + "*" + this.func.caller.arguments[2].row.getCell("SiteID").getValue());
   }

   SidePanelRefresh: Name of our graph action from the previous step
   InventoryID & SiteID are my parameters
   And again, using ‘*’ as a delimiter
    

Anyway, I hope this helps anyone looking to make dynamic side panels! If anyone has improvements on this method I’d love to hear constructive feedback.

Happy development!

@Dana Moffat , not sure if you are asking me or jknauf for the details :) I can show you what I did, for sure.

Thank you @yurik05 and @jknauf , looking forward to our side-panel meetings.

Hi @PatrickSchlenker90 

This is on our product backlog pending platform changes that would be needed to support this.

In 2022R2, we will be delivering many out-of-box side panels on the lists forms as well as some on the data entry forms that use summary-level information supplied to the side panel. 

Here is a link to the Community Meetup on Side Panels.  One of our community members shared their creative side panels and describe how they were able to support line-level side panels.

-Dana

@darylbowman I’ve never worked with side panels and I have been asked to do one that will show the quantity available on a line item of a Quote or Opportunity in a side panel.  It figures it has to be the “exception” to an easy side panel!  :-)  I was just about to dive in and try to duplicate the work of @jknauf when I read that you found a simplified way to do this.

FYI, Justin, I just watched your presentation from Community Meetup - Distribution Show & Tell: Side Panels (about a year ago).  Nice job.  

Without asking you to wholesale give me your code, is there another resource available for me to see how to access the side panel from within Visual Studio or any other “how to’s” related to side panels in Visual Studio?  I did look around and I didn’t find much in terms of code I can use to understand the process.  The best resource I’ve found is Justin’s code up above.

I’m thinking of using a SQL View in a DAC so that I can do most of the work in SQL, which in my opinion is way easier than trying to do it in a GI using the Acumatica DACs.  Then I simply create the GI using my custom DAC. 

I’m trying to grasp where I connect the dots in passing the inventory ID from the line item to the GI used in the side panel.  If I can do it without using javascript, that would be great.

Any super easy recommendations?  I love super easy.

Thanks in advance if you have time to comment.

Thank you for sharing @darylbowman and @jknauf !

product-version="22.209"

Thanks @darylbowman 

I’m noticing that your JavaScript is encoded ('NavigateToLayer$GI640594') whereas when I look at the project code, it does not seem to be. Did you do this or does this happen automatically after being published or something?

Another thing I might be missing.  What in the code or Javascript actually makes a reference to the side panel?  I didn’t have a copy of your GI so I wasn’t certain if this line should reference the GI or the side panel id.  

 throw new PXRedirectToGIRequiredException("JM_BOM Materials On Hand", parameters)

If I force the parameters.Add("InventoryID", "15265K"); in the refresh using debug set next step, it does update the side panel for Kit Items.  

I was assuming it was some acumatica magic that knows my GI is used on a side panel.

To get the script you used, I went to the screen in the project editor and clicked Edit ASPX.  I think it was automatically changed to #39.

I just opened the js in your screen using the project editor and I see it looks like this

function JS_SidePanelRefresh() { px_alls["ds"].executeCallback("SidePanelRefresh", this.func.caller.arguments[2].row.getCell("InventoryID").getValue() + "*" + this.func.caller.arguments[2].row.getCell("Quantity").getValue()); }

I will re-do those scripts on my project editor and let you know if that makes any difference.

For the px redirect, I am using the name of the GI and that seems to be working.  

Still not sure how the code knows which side panel option to populate.  I can only assume it knows based on the name of the GI being used?

Thanks Daryl.  Grateful for your help and good luck in the swamp!