How to bind bitrix:main.ui.filter to a specific infoblock?

Question

1C-Bitrix

Hello.
Created a new infoblock for publishing documents.
I wanted to know how to bind the bitrix:main.ui.filter component to it? And then I started to prescribe type parameters (for example, for the time being, I just started working with this component, so I don’t understand much )

$APPLICATION->IncludeComponent(
    'bitrix:main.ui.filter', '',
    [
        'FILTER_ID' => 'roster_list',
        'GRID_ID' => 'roster_list',
        'FILTER' => [
            'id' => 'DOCUMENT_TYPE',
            'name' => 'Тип документа',
            'type' => 'list',
            'items' => []
        ],
        'ENABLE_LIVE_SEARCH' => TRUE,
        'ENABLE_LABEL' => TRUE
    ]
);

and as a result I got this:

And where to place it so that it is displayed above the main workspace (as in CRM, tasks, etc.)? And then when I place it on the page itself or in the template, it simply merges with the page.
And when the elements of the infoblock appear, they just move to the side

. Thank you in advance.

Answer 1

To begin with, 'FILTER' => []there should be an array of arrays (now you just have an array)
Look at the article - it describes connection examples.
The link with the infoblock will need to be implemented by code.
To add a filter above the workspace, try wrapping CBitrixComponentTemplate::SetViewTarget in the component template

<?php
// например, в /local/components/company/report.list/templates/.default/template.php

$this->SetViewTarget('inside_pagetitle');

$APPLICATION->IncludeComponent('bitrix:main.ui.filter', '', [ 
    'FILTER_ID' => 'report_list', 
    'GRID_ID' => 'report_list', 
    'FILTER' => [ 
        ['id' => 'IS_SPEND', 'name' => 'Тип операции', 'type' => 'list', 'items' => ['' => 'Любой', 'P' => 'Поступление', 'M' => 'Списание'], 'params' => ['multiple' => 'Y']],
    ], 
    'ENABLE_LIVE_SEARCH' => true, 
    'ENABLE_LABEL' => true 
]);

$this->EndViewTarget();?>