Forum Discussion

bpeikes's avatar
bpeikes
Cloud Apps
01-18-2023

Blox dropdown?

Trying to follow the documentation on how to create a simple DropDown. I don't even want it dynamic (for now), but the documentation (https://docs.sisense.com/main/SisenseLinux/sisense-blox-reference.htm?Highlight=blox) doesn't seem to be correct, and is missing information.

For instance, under "Dropdown", it says "type":"Input.ChoiceSet", which is fine, but then for "id" it states that it MUST be "selectVal", all other examples show "id" equal to something like "data.filters[0].filterJaql.members[0]".

In addition, the docs state that "choices" is of type "Input.Choice[]", but there is no documentation showing an example of what "Input.Choice[]" would look like for a fixed list.

Can someone give an example of what a dropdown with a fixed list of items would be?

Blox

5 Replies

Replies have been turned off for this discussion
  • bpeikes's avatar
    bpeikes
    Cloud Apps
    01-18-2023

    I was able to find some of the information I needed, going to add it here in case anyone else reads this:
    1) Format for "choices" is
    "choises": [ { "title": "name1", "value":"val1" }, { "title": "name2", "value":"val2" },]
    2) You MUST set "displayType":"compact", you don't even need the "id":"selectVal"

    Now trying to figure out how to set the height of it. It doesn't match the height of the Date picker, so it looks very weird.

  • irismaessen's avatar
    irismaessen
    Data Pipeline
    01-19-2023

    In the responses to my earlier post about the Blox Dropdown, there is also a discussion of how to style a Dropdown widget. It turns out that in order to style the dropdown box itself, you need to include the "style" property at the top of the BLOX code in the widget. 

    For this to work, you *do* need the id set to 'selectVal'. Or tag the style with whatever other id you have set.

    something like this, inspired by Alek_qbeeq 

     

     "style": "#selectVal {  width: 100%; heigth: 10px; border: 1px solid;  border-radius: 15px;}

     

    • bpeikes's avatar
      bpeikes
      Cloud Apps
      01-19-2023

      This isn't true though. I have a concrete example, this works:

      {
	"type": "Input.ChoiceSet",
	"displayType": "compact",
	"backgroundColor": "#282c36",
	"choices": [
		{
			"title": "(Any)",
			"value": ""
		},
		{
			"title": "Item1",
			"value": "Item1"
		},
		{
			"title": "Item2",
			"value": "Item2"
		}
	]
}

      And this renders as a set of radio buttons:

      {
	"type": "Input.ChoiceSet",
	"id":"selectVal",
	"backgroundColor": "#282c36",
	"choices": [
		{
			"title": "(Any)",
			"value": ""
		},
		{
			"title": "Item1",
			"value": "Item1"
		},
		{
			"title": "Item2",
			"value": "Item2"
		}
	]
}
      • irismaessen's avatar
        irismaessen
        Data Pipeline
        01-20-2023

        Oh, I get where I caused confusion. Apologies

        I was only talking about adding/changing the formatting of the box that is there, and for that the 'id' attribute is required because the styling is set it.

        However, to get the dropdown, you *do* need the 'displaytype:compact' attribute (and that very much needs to be documented). But to format the resulting box, you need the style formatting at the top of the blox code, with the snippet that *has* the displaytype:compact, also having the id that you specify at the top (in the example case, selectVal).

        Good Luck!Iris