Example of Category Drop Down List

[WillStrohl]

Does anyone have any examples of using a drop down list for the categories? All I can find are renderings of the categories as a checkbox list.

[Timo-Breumelhof]

Will, could please post things that are not bugs or issue here:
https://opencontent.readme.io/discuss
That's what Sacha uses for "discussions" and documentation.

Schema:
"Type": {
"type": "string",
"title": "Type (single)"
}

Options:
"Type": {
"type": "select2",
"dataService": {
"action": "LookupData",
"data": {
"dataKey": "Type",
"valueField": "id",
"textField": "Title"
}
}
}

[WillStrohl]

I completely missed the discussions. Sorry. :(

[Timo-Breumelhof]

np :-)

[WillStrohl]

I'm not sure I followed what you were trying to tell me to do here... I looked at the existing schema and options, and I think that they pretty much looked the same.

Here's what I'm trying to do... How do I properly wire that up?

<div class="row">
	<div class="jplist-panel">
		<div class="dropdown form-group" data-control-type="checkbox-group-filter" data-control-name="Category"
			data-control-action="filter" data-control-deep-link="true">
			<label for="dropdown-menu-1">Filter By Topic</label>
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-1"
				data-toggle="dropdown" aria-expanded="true">
				<span data-type="selected-text">Filter</span>
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu-1">
				{{#each AdditionalData.Categories}}
				<li role="presentation">
					<a role="menuitem" href="#" data-path="{{Id}}" data-id="{{Category.Id}}" 
						data-type="text" data-default="true">{{Title}}</a>
				</li>
				{{/each}}
			</ul>
		</div>
	</div>
</div>

[Timo-Breumelhof]

Ok, sorry, I thought you meant in the edit interface..
I think this is more a jplist question than OC actually.
(assuming you want a category filter?)
I think this is what you need:

https://jplist.com/controls/filter-dropdown

[WillStrohl]

So there's not an existing example in the templates that shows how to do this that I'm missing? :)

[WillStrohl]

Hmmm... I just tried re-working what I had to match the example in the link and it didn't render properly and it's still not wired up. In my example above, it looks correct and the select list is loaded, but selecting a category is not changing the results.

[sachatrauwaen]

You need to set data-control-name with the opencontent field name
and data-path need to cantain the value

For exemple for category of articles template :
data-control-name="Category"
data-path="{{Id}}"

The filter controls in jplist need to be defined in a div with class="jplist-panel"

[Timo-Breumelhof]

For reference: https://opencontent.readme.io/discuss/5c0073312cc7e00041076f56
OC does not have a webapi implementation for all filters available in JpList

[b-creative]

I also used a form group to still have a dropdown feel:

the code in template.hbs:

`

                    <input type="text" class="form-control textfilter" value="" placeholder="Zoek op naam" data-control-type="textbox" data-control-name="Title" data-control-action="filter" data-event-name="keydelay">
                    <div class="input-group mt-1" data-control-type="filter-dropdown" data-control-action="filter" data-control-name="Category" data-control-deep-link="true">
                        <button id="dropdown-menu-2" class="btn text-left btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Zoek op processen</button>
                        <div class="jplist-group form-group dropdown-menu" aria-labelledby="dropdown-menu-2" data-control-type="checkbox-group-filter" data-control-action="filter" data-control-name="Category">
                            {{#each AdditionalData.Categories}}
                            <div class="checkbox">
                                <label for="{{Id}}">
                                    <input data-path="{{Id}}" id="{{Id}}" type="checkbox" />
                                    {{Title}}
                                </label>
                            </div>
                            {{/each}}
                        </div>
                    </div>
                    <div class="input-group mt-1" data-control-type="filter-dropdown" data-control-action="filter" data-control-name="Tags" data-control-deep-link="true">
                        <button id="dropdown-menu-3" class="btn text-left btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Zoek op functie</button>
                        <div class="jplist-group form-group dropdown-menu" aria-labelledby="dropdown-menu-3" data-control-type="checkbox-group-filter" data-control-action="filter" data-control-name="Tags">
                            {{#each AdditionalData.Tags}}
                            <div class="checkbox">
                                <label for="{{Id}}">
                                    <input data-path="{{Id}}" id="{{Id}}" type="checkbox" />
                                    {{Tag}}
                                </label>
                            </div>
                            {{/each}}
                        </div>
                    </div>
                </div>`