This page demonstrates Pull Reports'^™ capability to dynamically generate HTML hyperlinks at runtime from the unique values of each row of your report. Such 'drill through' reports allow a user to get more information about a particular record by following a specifically constructed hyperlink.

Read more about the <url_template> Pull Reports^™ XML configuration element.

This web page demonstrates Pull Reports™ software capabilities and does not represent real world information.

The hyperlink to this page was created with the following configuration:

<url_template>
    /athlete/${@@id}
</url_template>

Retrieve the doggie athlete's direct attributes from the Doggie Athlete Information report's JSON export service and output them to an HTML table

var reportURL =
    '../pullreports/catalog/olympics/report/athlete-information/export';

jQuery.get(reportURL
  ,{filter:'@id=' + athleteId,
    columns:'@breed,name,id,bdate,weight'}
  ,function( response ) {
		
    var $athleteAttributeTableBody = $('#athlete-attributes tbody')

    for (var i=0;i<response.meta.columns.length;i++){
        var column = response.meta.columns[i];
        var value = response.data[0][i];
        if (typeof value === 'object' && value.value){
            value = '<a href="' + value.url +'">' + value.value + "</a>";
        }
        $athleteAttributeTableBody.append(
            '<tr><th>' + column.displayName + '</th>' + 
            '<td>' + value + '</td></tr>');
    }
});

Retrieve the doggie athlete's associated event records from the Doggie Olympics report's JSON export service and output them in an HTML table. In this example, one doggie athlete may participate in multiple events.

var reportURL =
    '../pullreports/catalog/olympics/report/athlete-information/export';

jQuery.get(reportUrl
    ,{format:'json'
      ,columns:'@breed,name;/athlete/event@name,place;/athlete/event/category@name'
      ,sort:'/athlete/event/category@name;/athlete/event@name'
      ,filter:'/athlete@id=' + athleteId
     }
    , function(response) {
    
    var categoryIndex=4;
    var eventIndex=2;
    var placeIndex=3;

    if (response.data.length > 0){
        var $athleteAssignmentTableBody = $('#athlete-events tbody')

        for (var j=0;j<response.data.length;j++){
            $athleteAssignmentTableBody.append(
                '<tr>><td>' + response.data[j][categoryIndex] + '</td>' +
                '<td>' + response.data[j][eventIndex] + '</td>' +
                '<td>' + response.data[j][placeIndex] + '</td></tr>');

        }
    } else {
        $('#athlete-events').parent().append('<p><em>No events available</em></p>');
    }
});	
            

Retrieve the doggie athlete's location from the Athlete Information report's GeoJSON export service and output them in a Leaflet map.

var reportUrl =
    '../pullreports/catalog/olympics/report/athlete-information/export';

jQuery.get(reportUrl
    ,{format:'geojson'
      ,filter:'@id=' + athleteId}
    , function( response ) {
    
    if (response.features.length > 0){
        var mapOptions = {layers:[]};
        
        mapOptions.layers.push(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            ,maxZoom: 16
        }));

        var geoJsonLayer = L.geoJson();
        geoJsonLayer.addData(response.features);
        mapOptions.layers.push(geoJsonLayer);

        var map = L.map('athlete-address',mapOptions);
        map.fitBounds(geoJsonLayer.getBounds(),{maxZoom:12});
    } else {
        $('#athlete-address').html('<p><em>No address available</em></p>');
    }
});
            

Retrieve the owner's assessments from the Owner Assessments report's JSON export service and output them in a Google Visualization graph.

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

    jQuery.get('../pullreports/catalog/olympics/report/owner-assessment/export'
        ,{columns:'@id,athlete_id,category_name,rating'
           ,filter:'/owner_assessment@athlete_id=' + athleteId}
    , function(response) {
        
        if (response.data.length > 0){

            var classNameIndex=2;
            var ratingIndex=3;

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Class');
            data.addColumn({type:'number', label:'Rating',pattern:'#'});
            
            var rows = [];
            for (var j=0;j<response.data.length;j++){
                rows.push([response.data[j][classNameIndex],response.data[j][ratingIndex]]);

            }
            data.addRows(rows);

            // Set chart options
            var options = {'title':'Owner Event Assessments',
                           'width':400,
                           'height':300,
                           'hAxis':{minValue:0,maxValue:10}};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('owner-assessments'));
            chart.draw(data, options);
        } else {
            $('#owner-assessments').html('<p><em>No assessments available</em></p>');
        }
    });	
}