Populate ui only fields on page include popup from url params

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I know that title covers several issues all at once, hopefully I can describe this well.

We have a highly customized opportunity page built on skuid. I am working on a popup to add opportunity line items to the opportunity page from a product search tab on the page. We would like to use this popup for opportunity line items as well as quote line items in the future. The idea is to make it as generic as possible. Here's what I have thus far:

On our product search tab each product in the search table has a button on it. The snippet that button calls builds a popup via xml and calls createPopupFromPopupXML to open the popup. The hope here is to eventually raise an event from the button and have whatever the main page under the popup deal with it how it would like. The xml is very simple and only includes a single page include to the actual popup page. It also, theoretically, would use a handful of query string parameters to pass default values into the page include of the popup. It looks something like this:


var params = arguments[0];
var popupXMLString = 
'<popup title="Add Product" width="800">' +
    '<components>' +
       '<includepanel type="skuid" uniqueid="sk-3EmBQM-285" pagename="ProductModal" module="" querystring="duration=10&amp;productid=' + params.item.row.Id + '">' +
          '<renderconditions logictype="and"/>' +
       '</includepanel>' +
    '</components>' +
'</popup>';

var popupXML = skuid.utils.makeXMLDoc(popupXMLString);

var popup = skuid.utils.createPopupFromPopupXML(popupXML);


The popup page has a model on it derived from Product2 with a number of ui only fields meant to mimic those on our lineitem model. They are shown on a field editor. I have setup a couple conditions on this model to prepopulate fields from the passed in query string values. I am passing the Product2 id as productid and the popup catches that value properly. It does not catch any values from the other variables. As seen above I am trying to pass in a default duration value. This should be picked up by the duration ui only field and prepopulated but it is not happening. I've tried making that a text field, passing in 10.0 instead of 10. I've tried date values on other fields. Nothing seems to work.

Is there something I need to do to get these ui only field to pickup url params? Could I pass these default values through the popup context object somehow? This was supposed to be the easy part and I've been banging my head trying to get it to work for a couple days now.

Thanks,
Jesse
Photo of Jesse Kovarovics

Jesse Kovarovics

  • 110 Points 100 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I haven't tried this, but you may be able to make your UI only fields a formula field and enter something like {{$Param.Product2}} . Replace Product2 with the name of your URL parameter.
Photo of Jesse Kovarovics

Jesse Kovarovics

  • 110 Points 100 badge 2x thumb
Tried adding a template component and no values are coming through using $Param. Not even the productid that is otherwise working. The one value that does come through is the id url param which is the opportunity id in the url params on the main page.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Key issue here.  URL Parameters are not passed into page includes in the same way that they are passed into stand alone pages.  So the merge syntax  {{$Param.foo}} will not return any data in the page include, even if the parameter is included in the "page include" definition.  URL Parameters in includes are available for server side processing, but not for client side processing. 

What we do is have the URL Parameter query the database, and then return data into models specifically created for the Include - which can be interacted with on the include. Then you are just using model merge syntax in your include and it works much better. 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Rob, are you saying that you would create an object that would store the default values and then bring those default values into a model on the page include, then use the values in those models to populate UI fields with merge syntax?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
No,  not quite.  Let's use Jesse's example. He wants a page include to show one button if url parameter "type=quote" and another button if url parameter "type=lineItem".   His parent page sets the url for the page include based on the presence of child relationship records on the opportunity object.  But he finds that when he puts a template on the page include with {{$Param.type}} it is blank.  

What to do.

You are probably already sending an opportunity ID into the page include.  This is being used to query an "opportunityInclude" model and present it in the page include.  Add a similar child relationship query so you know whether there are quotes or line items in that model and then do conditional rendering based on model data.  

All of your client side processing has to get shifted down the line so that it accesses Model data from within the page include,  rather than parameter data passed into the page include. 
Photo of Jesse Kovarovics

Jesse Kovarovics

  • 110 Points 100 badge 2x thumb
I had actually hoped to not pass an opportunity id into the page include. There would be an "add product" button on the popup that would publish an event containing the product data including the ui only fields. If the page behind the popup is the opportunity page, it would subscribe to that event and inject it's id into the product before adding it. If the page behind is the quote, it would inject its id instead.

That being said, if that won't work, what Rob is suggesting will. I had this all working that way in the first place and we took a bit of a design turn in attempts to keep all our pages and popups as generic and reusable as possible. There's only so far we can go with that though.

Thanks for the help!