Default item for the dropdown

Custom Brics
1

I’m struggling to set the default item for dropdown on Bric Builder (v6.1.7).

I configured a dropdown control with the following settings:
Title: Position
Function: setTitlePosition
Attribute: data-title-position
Value: 1,2,3,4,*seperator*,Hidden

I want the item “3” to be selected by default.
I wrote HTML:

<div data-my-bric="true"
     data-title-position="3"
     ....
     class="my-bric"></div>

When I export, it reflects these data-* values (so, actually the bric behaves “3” is selected on the exported website) while the Blocs UI shows as the option “1” (the first item) is selected by default (so, the different item compared to the actual selected value).

How can I option other than the first item to be selected by default in the Blocs UI?

P.S. What is seperator? Not separator?

2

you can perform the initialization in the function “init” in “custom-bric.js” with an API call

window.webkit.messageHandlers.setUIVal.postMessage(‘{“attr”: “dropdown-data”, “value”: “1”, “sync”: “false”}’);

https://help.blocsapp.com/knowledge-base/api-calls/

2 Likes
3

The dropdown might look at the order in the UI and not the data attribute on export. One thing you could try is setting the default inside the Bric setup (under Controls) and not just in the HTML. Also, yeah, “seperator” looks like a typo—probably meant to be “separator.”

4

Thank you for pointing out.
I dig a bit deeper and found workarounds.

RULE: Make DIV element of HTML (e.g., data-*) be the single source of truth

  1. For checkbox, stepper field, alignment, color, etc., you may write the default value (e.g., 1 for checked and 0 for unchecked on a checkbox) in “Value” field in the Bric Builder. Make sure it matches data-* attributes specified in the DIV element of HTML.
  2. For dropdown list, there is no way to specify the default value in Bric Builder, because “Value” field is for specifying the items in the list, not the default choice. The Blocs UI always show the first item as the default value. It leads mismatch between the selected item in the Blocs UI and the data-* attribute in the HTML. To force matching them, obtain data-* attribute for the dropdown list and change the selected item by using setUIVal API in init function.