Page History

This is answer to a question asked in Atlassian Community - https://community.atlassian.com/t5/Confluence-questions/Using-a-field-in-form-A-to-filter-a-table-with-data-from-form-B/qaq-p/2149550

Shows details of a record (other fields) selected via smart dropdown as a table inside the form view

ConfiForms Form Definition

formName	formB

sash

tttext

tatatextarea

labelLabelfalse[label1=label1|label2=label2|label3=label3|]multi

...

HTML

<script type="text/javascript">

  var apiCall = AJS.params.contextPath + '/rest/confiforms/1.0/search/' + AJS.Meta.get("page-id") + '/formB/id:';

  function loadFormBDetails(formName, formId){
     AJS.$.ajax({
        url: apiCall + AJS.$('#' + formId).find('#i_option').val(),
        type: "GET",
        async: false,
        cache: false,
        success: function (data) {
          var transformTemplate = [{"name":"Created", "prop": "created", "renderer": "renderDate"}, {"name":"TextArea", "prop": "fields.ta"}, {"name":"Label", "prop": "fields.label", "renderer": "labelrenderLabel"}];
          buildHtmlTable('#formBDetailsTable', transformData(data.list.entry, transformTemplate)); 
   		}  
	});   
 }
</script>

...

HTML

<script type="text/javascript">
// based on an answer found at https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table

// Builds the HTML Table out of myList.
function buildHtmlTable(selector, dataList) {
  AJS.$(selector).html('');
  var columns = addAllColumnHeaders(dataList, selector);

  for (var i = 0; i < dataList.length; i++) {
    var row$ = AJS.$('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = dataList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append(AJS.$('<td/>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(dataList, selector) {
  var columnSet = [];
  var headerTr$ = AJS.$('<tr/>');

  for (var i = 0; i < dataList.length; i++) {
    var rowHash = dataList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append(AJS.$('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

function findProp(obj, prop, defval){
    if (typeof defval == 'undefined') defval = null;
    prop = prop.split('.');
    for (var i = 0; i < prop.length; i++) {
        if(typeof obj[prop[i]] == 'undefined')
            return defval;
        obj = obj[prop[i]];
    }
    return obj;
}

function transformData(dataArray, transformTemplate) {
    var transformed = [];
    for (var i = 0; i < dataArray.length; i++) {
      var dataRow = dataArray[i];
      var transformedRow = {};
      for (var j = 0; j < transformTemplate.length; j++) {  
        var propValue = findProp(dataRow, transformTemplate[j].prop);
        
         if (propValue != null && 'renderLabel' == transformTemplate[j]['renderer'] != null) {
          var propValues = JSON.parse(propValue);

          var values = '';
          for (var k = 0; k < propValues.length; k++) {
            var val = findProp(propValues[k], transformTemplate[j]['renderer']);
            if (val != null) {
               if (values != '') {
                 values = values + ', ';
               }
               values = values + val;
            }
          }
          transformedRow[transformTemplate[j].name] = values;
         } else if (propValue != null && 'renderDate' == transformTemplate[j]['renderer']) {
           var newDate = new Date();
           newDate.setTime(propValue);
           transformedRow[transformTemplate[j].name] = newDate.toUTCString();
         } else {
           if (propValue != null) {
            propValue = propValue.replace(/(?:\r\n|\r|\n)/g, '<br>');
           }
           transformedRow[transformTemplate[j].name] = propValue;
         }
      }
      transformed.push(transformedRow);
    } 
 return transformed;
}

</script>

Children Display

Space shortcuts

Child pages

Versions Compared

Old Version 32

New Version Current

Key