Backend List as Grid View

Need Help
#1

Anyone did manage to display a backend list as a grid view?
if so, can help share some info and code to perform this would be much appreciated
thank you

#2

Hi @chris

You can specify a customViewPath config item and use it to override any partial in the List widget. This would let you replace the table with a column layout.

1 Like
#3

Hi @daft
thank you , I was on this track. Will let you know my progress.

#4

First thig first, I am adding a sidebar to the backend list at the image of what is done in the Reviews controller in the Test plugin.
I’d like to style the sidebar, as i need a tree with 2 levels, and I am wondering where I can find some documentation on the available UI I could use please?

#5

There is that module that seems to do something similar of what you are looking for.

#6

thanks @PubliAlex, yes I looked into it but its not OC v3 compatible and it has too much code in it cumbersome to customise.

#7

Hi @chris , i’ve already done something like this on OC v1, never tested it in v2 , and i’ve made some changes for v3.
here’s what it looks :

image
image1903×825 155 KB

EDIT :
to make this display, i have use the customViewPath config item in config_list.yaml, it targets my partials in the controller folder.

1 Like
#8

I’ve done this for a drag and drop scheduling thing:

image
image1889×592 80.5 KB

It uses the filters and functions from the ListController and the customViewPath to override the list.
The actual list is rendered on the left side (“Submission”), and the drag target containers are custom partials.

If you check out the ListController, function listMakePartial, you’ll see that it uses the makePartial function to rendern partials like ‘list_container’, which you can override in your controller partials folder with ‘_list_container.htm’ to get full control.

Example from the above image:

<?= $this->makePartial('$/medworld/maves/controllers/scheduling/_scheduling_toolbar.htm', [
    'toolbar' => $toolbar, 'filter' => $filter
]); ?>

<div class="container-fluid">
    <div class="row">
        <div class="drag-container" data-scheduling-control data-handler="onUpdateSessionSubmissionAssignments">
            <div class="drag-list">
                <div class="drag-column drag-source-container">
                    <div id="<?= $list->getId() ?>">
                        <?= $list->render(['useContainer' => false]) ?>
                    </div>
                </div>
                <div id="sessions-scroll-container">
                    <div class="sessions-container">
                        <?= $this->makePartial('$/medworld/maves/controllers/scheduling/_scheduling_sessions_container.htm', [
                            'sessions' => $sessions
                        ]); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Forgot a shoutout for the documentation: List Controller - October CMS - 3.x

1 Like
#9

merci bien @Ladylain :wink: