Page History

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

Let's have this required layout:

Image Modified

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 Image Modified
• Action button view with single button Image Modified

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

標準的な手段では利用できない方法で、レポートの要素を移動させることが必要になる場合があります。

この必要なレイアウトを用意しましょう：

Image Added

この画像は、地図のサイドパネルに検索ボックスとアクションボタンを追加した地図の一部です。これは標準的な方法ではできません。

私たちはカスタムJavascriptとカスタムスタイルを使用し、それをレポートの設定→レポートの内容の後に挿入されるHTMLコンテンツに配置します。

しかし、まずは以下のようなレポートが必要になります

• 検索変数フィルタを持つマップビュー Image Added
• 単一のボタンを持つアクション・ボタン・ビューImage Added

これが設定フィールドの内容になります：

<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>

では、各行について説明します：

BDConfig.postInitCallbacks.push(function($) { - スクリプトは、基本的なJSが開始された後(つまりJQueryがロードされた後)に呼び出されるように、このコールバックでラップする必要があります。

$(window).on('t5:zone:did-update', function(e) { - このイベントは、レポート内でビューがロードされるたびに、またはいくつかのゾーンがロードされるたびに呼び出されます。

アクションボタン、フィルター、要素を配置するmemberContainerを取得します。しかし、要素がすでに移動されていないかチェックする必要があります！

あとは、単純に要素を動かして、望みの結果が得られるようにいじくるだけです。

p.hide() - これは、アクションボタン・ビューを移動した後に非表示にするためです。しかし、これは編集したいときにビューにたどり着くのが難しいので、ベストな方法ではありません。より良い方法は、このビューにカスタムCSSクラスを追加することです。例えば、"hiddenInView "として定義します：

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

こうすることで、レポートが編集モードの時にビューが見えるようになります。

window.dispatchEvent(new Event('resize')) - ビューの整列を取得し、サイズを再計算するために最後に呼び出します。