open a new window with a table of the model used for a visualization

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Open a Popup or even a window from a page with the model being used by a chart so far i have been able to open a new page from a script on the click of one of my charts however i want the page i open to have the same model used for the chart is there a way to do this with a generic page or even popup which show all fields in the visualization or even if i have to manually configure/pass the fields

this is as far as i have gotten with my javascript

(function(skuid){
	var $ = skuid.$;
//var myModel = skuid.model.getModel('MyModelId');
//var myComponent = skuid.component.getById('MyComponentUniqueId');
console.log("Chart element: " + document.getElementById("highcharts-4"));
console.log(document.getElementById("highcharts-4"));
window.onload = function(){
var chart = document.getElementById("highcharts-4");
console.log("Chart element: " + document.getElementById("highcharts-4"));
console.log(document.getElementById("highcharts-4"));
chart.onclick = function(){
console.log(window);
window.open("www.google.com",'_blank');
}
};
})(skuid);
 
Photo of Yakup

Yakup

  • 80 Points 75 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Take a look at this forum post: 
https://community.skuidify.com/skuid/topics/trigger_popup_from_javascript

The most straightforward thing to do will be to have the popup triggered from clicking on the dom element contianing the chart.  Then have the popup call a page include (so you don't have to write the xml for the popups contents manually).  In that include you can have the model repeated and (use a different model name) and show the table. 
Photo of Yakup

Yakup

  • 80 Points 75 badge 2x thumb
Does that mean that i would have to design a page/model for each graph to be shown in the page include because i wanted a generic page that could accept any model/data to create a page
Photo of Yakup Kaygusuz

Yakup Kaygusuz

  • 130 Points 100 badge 2x thumb
Also how would i go about getting the relevant model from the dom element to display on the popup
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I'm not sure you will be able to create a generic page that can be used across multiple models.  You will need to define the models and the fields for the chart and table on each page. 

But you can make all this work on one page if you are wiling to include the XML for the table generation in your Javascript that generates a popup.  You could build out the Table elsewhere in your page,  go to the XML view (Bottom right of the builder page) and then copy the table section into your Javascript. 
Photo of Yakup Kaygusuz

Yakup Kaygusuz

  • 130 Points 100 badge 2x thumb
Thats what i was planing to do generate the xml programatically however i am having issues trying to get the relevant model from the chart. so that from my inline code i grab the relevant model of the chart that was just clicked on.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Getting the Model name for the chart at hand is going to be tricky.   You can get the xmlDefinition that builds the chart through our Component API.  If you wrap the chart in a panel and give that panel and ID - you can get more granular about the component definition you are targeting. 

Below is a picture of the component definition in the console.   You will be interested in the "nodeValue" attribute. 



This is not standard development.  And as such I'm not sure we are going to be able to dig much deeper.  Buy you seem willing to tackle a hard question.   Enjoy. 
Photo of Yakup Kaygusuz

Yakup Kaygusuz

  • 130 Points 100 badge 2x thumb
I have gotten the model name now i need a way to trigger the onclick event via the  element how do i do this using this skuid component?

As Each graph has varying model's i will have to register a different popup for each graph however i dont want a large if statement how do i achieve this?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I would reccomend using the "before render snippett" feature to add onclick behavior to the chart.  
Photo of Yakup Kaygusuz

Yakup Kaygusuz

  • 130 Points 100 badge 2x thumb
how is the element defined in the before render snippet space