It may be required to move elements of report in ways that are not available by standard means. 

Let's have this required layout:

This image shows piece of map with added search box and action button in the sidepanel of the map. This is not doable using standard means. 

We will use custom Javascript and custom styles that we will place into report Settings → HTML content inserted after report content.

But at first we need report with

  • Map view that has a search variable filter
  • Action button view with single button

This will be the content of the settings field:

<script>
  BDConfig.postInitCallbacks.push(function($) {    
  $(window).on('t5:zone:did-update', function(e) {    
    var buttons = $('.viewContentInnerLayout .actionButtons')
    var filters = $('.viewContentInnerLayout .variablesBox')
    var members = $('.membersContainer')
    var formInFilters = members.find('form')
    if (members.length && buttons.length && filters.length && !formInFilters.length) {             
      var p = buttons.closest('.grid-stack-item')
      buttons.css({float:'right'})
      members.prepend(buttons.clone(true))
      p.hide()
      
      $filtersForm = filters.find('form')
      $filtersForm.css({float:'left'})
      $filtersForm.find('input').attr('style','')
      $filtersForm.find('div').attr('style','')
      $filtersForm.find('p:first-child').remove()
      $filtersForm.find('div:last-child').remove()
      members.prepend($filtersForm)
      filters.closest('tr').remove()
      
      window.dispatchEvent(new Event('resize'))
    }
  })
  })
</script> 

<style>
  // Custom CSS styles
</style>

Now let's describe certain lines:

BDConfig.postInitCallbacks.push(function($) { - Scripts need to be wrapped in this callback to ensure they will be invoked after basic JS are initiliazed (i.e. after JQuery is loaded).

$(window).on('t5:zone:did-update', function(e) { - This event is invoked whenever a view is loaded inside a report or whenever some zone.

We follow by retrieving action button, filters and memberContainer in which we we will place the elements. But we need to check that the elements are not already moved!

Then it's just simple movement of elements and fiddling with them to get the desired result.

p.hide() - This is to hide the action button view after it's been moved. However, this is not the best way as it's hard to get to the view when you'd want to edit it. Better way would be to add custom CSS class to this view, e.g. "hiddenInView" which would be defined as:

.reportView-editMode .hiddenInView {
    display: block !important;
}
.hiddenInView {
    display: none;
}

This way the view is visible when report is in edit mode.

window.dispatchEvent(new Event('resize')) - call in the end to get view align and recalculate sizes

  • No labels