Tagify Group By

[Heather_Mann]

Is there any way to use the Tagify component to group the selections like this from the tagify demos?

https://yaireo.github.io/tagify/

[patrick]

That will not be possible with the tagify component. If you look at the code of that sample you see that it requires a lot of customization of the tagify component and it is not simply setting some properties, it would be difficult to have this functionality with some extra properties on our App Connect component. You could create your own custom App Connect component for it.

[famousmag]

But I suppose we could “fakely” present them like groups with a bg-color based on the group charecteristic/field (of course no group tiltes)

[famousmag]

Here is what I thought in action…

tagifyGroups

I have a serveconnect pulling some Items from DB and it as an Data Source in a DataView:

In my example, I choosed to “group” my tagify values based on the item’s price:

• tit_price <= 200
• tit_price > 200 && tit_price <= 300
• tit_price > 300 && tit_price <= 500
• tit_price > 500

So, I sorted my DataView on tit_price.

Added a tagify and set the DataSourse to the above DataView.

Used the tagify’s Class Field to give a background color (and bg-opacity-50) depending on the price range:

Here is the Tagify code:
<input type="text" class="form-control bg-white lh-base py-1" id="groupTagify" name="groupTagify" aria-describedby="input1_help" placeholder="Select Items" is="dmx-tagify" dmx-bind:data="data_view2.data" tag-text="tit_title" tag-value="tit_id" min-chars="0" dmx-on:changed="notifies1.info(values);srvc_checkVariations.load({selectedvalues: values})" tag-class="tit_price&lt;=200?'bg-primary bg-opacity-50':(tit_price&gt;200&amp;&amp;tit_price&lt;=300)?'bg-info bg-opacity-50':tit_price&gt;500?'bg-danger bg-opacity-50':'bg-warning bg-opacity-50'" tag-secondary="tit_price.formatCurrency('$', '.', ',', 2)">

Hope this workaround suits in your case

[Heather_Mann]

Thanks. That’s a clever workaround but unfortunately it won’t work for what I need. I need to group by Year and have the group header display the year. Different colors won’t provide enough info.

[Heather_Mann]

If it’s too complicated for you guys I seriously doubt I’d be able to work it out!

[George]

I’ve moved this to the feature requests, as it seems also useful to me and others can vote to this as well.

We can then try to offer more extensive customization of tagify with templates and different layouts, it will require more work of course and maybe even a brand new component as the current tagify is made from a simply input control that can’t have much customization, but a whole new component can.

[Heather_Mann]

I’ve come up with a workaround using SQL. This one is putting items into different categories (easier example than the years one which I also need to do).

I did a custom UNION SELECT query which adds a line item for each category with an id of 0 so I can put that at the top of each category list. I also added a readonly column and a class column so I could have the header row read only and style it differently to the line items.

    SELECT DISTINCT
	0 as`tripbit_id`,
	`view_tripbits`.`category` as title,
	`view_tripbits`.`category`,
	TRUE AS readonly,
	'header' AS class 
FROM
	`tbl_album_tripbits`
	INNER JOIN `view_tripbits` ON `view_tripbits`.`tripbit_id` = `tbl_album_tripbits`.`tripbit_id`
	INNER JOIN `tbl_albums` ON `tbl_albums`.`album_id` = `tbl_album_tripbits`.`album_id` 
WHERE
	`tbl_albums`.`trip_id` = 430
	AND `view_tripbits`.`category_id` < 18
UNION SELECT
	`view_tripbits`.`tripbit_id`,
	`view_tripbits`.`title`,
	`view_tripbits`.`category`,
	FALSE AS readonly,
	'item' AS class 
FROM
	`tbl_album_tripbits`
	INNER JOIN `view_tripbits` ON `view_tripbits`.`tripbit_id` = `tbl_album_tripbits`.`tripbit_id`
	INNER JOIN `tbl_albums` ON `tbl_albums`.`album_id` = `tbl_album_tripbits`.`album_id` 
WHERE
	`tbl_albums`.`trip_id` = :P1
	AND `view_tripbits`.`category_id` < 18
ORDER BY
	category ASC,
	tripbit_id ASC,
	title ASC

I then select the fields in my tagify component.

And then add a bit of styling to the header class

.header img {
  display: none;
}
.header{
  background-color: whitesmoke;
}

And Voila!

I think it would still be fantastic if this could be done natively in Wappler, but this will work for now.