Search code examples
comboboxxpagesssjs

How to apply a style to an hiearchial comboBox in XPages

I have a comboBox in XPages which is showing an hierarcal list of categories and values populates as a vector in SSJS.

I now want to apply a styleheet (bold) to the categories (i.e on only the categories of the generated option tags)

enter image description here

please note that I do not need a lesson in how stylesheets work. I need to know how to add a class or style to the categories in the outputted options tags

how can I do that?

thanks

Thomas

 UPDATED MY QUESTION WITH A WORKING CLASS

Mimics a categorized view with 3 columns in a comboBox, category, label and value

public class Utils {

    public static List<SelectItem> getGroupedComboboxOptions() {

        try {

            Database db = ExtLibUtil.getCurrentDatabase();
            View vv = db.getView("ProdukterByCat");

            Vector v = vv.getColumnValues(0);
            List<SelectItem> groupedOptions = new ArrayList<SelectItem>();
            SelectItemGroup group;

            for (int i = 0; i < v.size(); i++) {

                List<SelectItem> options = new ArrayList<SelectItem>();
                group = new SelectItemGroup(v.get(i).toString());
                ViewEntryCollection nvec = vv.getAllEntriesByKey(v.get(i), true);
                ViewEntry entry = nvec.getFirstEntry();

                while (entry != null) {

                    SelectItem option = new SelectItem(entry.getColumnValues().get(2).toString(),entry.getColumnValues().get(1).toString());
                    options.add(option);
                    entry = nvec.getNextEntry(entry);
                }
                group.setSelectItems(options.toArray(new SelectItem[options.size()]));
                groupedOptions.add(group);
            }
            return groupedOptions;

        } catch (NotesException e) {
            e.printStackTrace();
        }
        return null;
    }

}

enter image description here

Solution

  • A combobox in XPages is rendered using a HTML select tag. If you organise the options in optgroup's (see also Populating selectItems of the combobox (label, value) using a managed bean) you get some default styling out of the box. Example here.

    You can even apply additional styling on them with standard CSS by targeting the optgroup. But support for that is limited: it doesn't work on an iPad for example.

    If you want more control on how your dropdowns look, I'd suggest to use a plugin like Select2.