Org Chart select event

Forums SPJS Charts for SharePoint Org Chart select event

This topic contains 12 replies, has 2 voices, and was last updated by  Alexander Bautz 5 months ago.

  • Author
    Posts
  • #19190

    Phil Grant
    Participant

    Hi,
    It is possible to filter a sub chart from the master based on the filters used but is it possible to filter the sub chart based on a selection made in the master chart, this is in the Org Chart.

    I have a table chart view under the org chart view that has extra information shown and I would like to limit the table chart to the selected box in the org chart above.

    Cheers,
    Phil

  • #19214

    Alexander Bautz
    Keymaster

    Yes, you can use this custom js. You can put it in a script editor web part in the page where you have the chart or put it in a file and refer it in the “Load external JS or CSS” tab in the chart config. If you use a script editor web part you must wrap the code in a <script> tag.

    orgChartSelectHandler("YOUR_ORG_CHART_ID");
    function orgChartSelectHandler(id) {
        try {
            google.visualization.events.addListener(spjs.charts.data.charts[id], "select", function (e) {
                var selection = spjs.charts.data.charts[id].getSelection(), data = spjs.charts.data.chartData[id], item, selectedItem = "";
                for (var i = 0; i < selection.length; i++) {
                    item = selection[i];
                    selectedItem = data.getFormattedValue(item.row, 0);
                }
               jQuery("#ID_OF_FILTER_SELECT_IN_TABLE_CHART").val(selectedItem).trigger("change");
            });
        } catch (ignore) {
            setTimeout(function () {
                orgChartSelectHandler(id);
            }, 1000);
        }
    }

    You must edit the snippet and replace “YOUR_ORG_CHART_ID” with the ID of your org chart, and “ID_OF_FILTER_SELECT_IN_TABLE_CHART” with the ID of the dropdown select filter above your table chart (you must set up a filter in the table chart configuration). To find the ID, right click the dropdown select and click “inspect”. You will find the ID attribute in the HTML code

    Let me know how this works out.

    Alexander

  • #19231

    Phil Grant
    Participant

    Thanks for that, I’ll give it a try, I’m just delving into your dynamic forms wrapper at the moment …. Brilliant.

    Thanks,
    Phil

  • #19341

    Phil Grant
    Participant

    Alexander,
    It worked a treat thanks, once I’d figured out the correct filter ID in the table.

    Phil

  • #20461

    Phil Grant
    Participant

    Alexander,
    I tried to use this method to link two Table charts together but can’t seem to get it working.
    Should this work the same or is it specific to orgCharts?

    Regards,
    Phil

  • #20483

    Alexander Bautz
    Keymaster

    Not sure how this works in a table chart actually – did you try to add an alert or console.log in the code to see if it triggers when you select a cell in your table?

    Alexander

  • #20496

    Phil Grant
    Participant

    Sorry but I just don’t have the Javascript skill to sort this out, I looked into the Google help and there does seem to be a difference between charts and tables.

    I tried to get an alert and depending were I put it I could get it appearing constantly , even when nothing was clicked or never.

    Regards,
    Phil

  • #20506

    Alexander Bautz
    Keymaster

    I tested and the function does work, but what is it you want to send to the other table? – do you want to use the selected cell value as a filter in the other table filter controls (dropdown select) like the example with the org chart?

    Alexander

  • #20512

    Phil Grant
    Participant

    Yes, I have a list in a table view with DFFS and vLookup to another list with defined actions linked to the master list.
    I want to have a table with all the items from the master list and have a table showing the linked actions below an limit the actions shown when the row in the top table is selected.

    • #20534

      Alexander Bautz
      Keymaster

      I’m not sure this is the best way to do it. Have you tried connecting the list views?

      To do this, add a list view of both lists to a web part page. Then edit the page, and on the child list, choose “Connection” from the dropdown and select “Get filter value from” and select the parent list view. Select which field to send from the parent to the child and finish the connection. When this is done, click the “select” icon in the parent list to filter the child list.

      Alexander

  • #20540

    Phil Grant
    Participant

    Unfortunately the “connections” option is greyed out ??
    Just realised, you meant raw lists not SPJS table charts, DOH! yes that seems to work but not as nice looking as the SPJS view.

    • This reply was modified 5 months, 1 week ago by  Phil Grant.
  • #20546

    Phil Grant
    Participant

    Unfortunately the raw sharepoint list view is no good because the notes field shows “View entries” instead of the text.

  • #20596

    Alexander Bautz
    Keymaster

    When using the built in append functionality, your comments are stored in different versions of the list item, and I don’t think the data pulled in by the Charts query shows the full text either – or have you tested it and found that it does?

    Maybe you can change the method used to append to a normal text field like discussed here: http://spjsblog.com/forums/topic/display-appended-multiline-field-history-in-email-body/#post-20594

    Alexander

You must be logged in to reply to this topic.