Dynamic Buttons instead of Dynamic Select

[UKRiggers]

My next little task is to convert a number of Dynamic Select pull-down menus into Dynamic Button Groups like shown above. Has anyone done this in Wappler?

I’m just after a bit of guidance before I start.

There are several things to consider

• I want to be able to show a pre-selected button and make it obviously selected.
• I want the buttons to fill/stretch/flex the width of the column where the other input fields are.
• The number of buttons will vary. There could be just two, or as many as 22! OK, maybe not 22 but I know of some that will have 10 and 14 items.

I don’t want to overcrowd a line of buttons

I want to buttons to flow onto two or more lines if necessary. It doesn’t really matter how many lines.

Any suggestions or guidance?

[nshkrsh]

code:

<div class="d-flex flex-wrap">
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>  
  <button class="btn btn-primary m-2">Button</button>
  <button class="btn btn-primary m-2"><i class="fas fa-upload"></i></button>    
</div>

outcome:

flex is almost as awesome as wappler

[UKRiggers]

Hi Nishkarsh, thanks for that, but as you can see from the above images, I can already create basic, static buttons. The thing is that I’m wanting to create them dynamically and they need to be a Button Group so as to act like a replacement for a Select Drop-Down Menu. Your example treats all the buttons as individual buttons.

Here is my code for the first screenshot mock-up above.

        <div class="form-group row">
          <label for="inp_data_order" class="col-sm-3 col-form-label">Buttons</label>
          <div class="col-sm-9 pt-1 pb-1">
            <div class="btn-group d-flex" role="group" aria-label="Button Group">
              <button class="btn btn-primary btn-sm">Button 1</button>
              <button class="btn btn-primary btn-sm">Button 2</button>
              <button class="btn btn-primary btn-sm"><i class="fas fa-user" aria-hidden="true"></i></button>
              <button class="btn btn-primary btn-sm">Button 4</button>
            </div>
          </div>    
        </div>

[nshkrsh]

add a Repeat Children element and place the button inside it.
Repeat Children element can ensure the buttons are populated dynamically. Repeat Children’s class will be “d-flex flex-wrap”
and d-flex and flex-wrap will ensure the button layout is just as you expect.

this is the actual code that we used in a project, we used checkbox instead of button as in our use case it had to be single select only:

             <div id="repeat1" is="dmx-repeat" dmx-bind:repeat="group1.value">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input d-none" type="checkbox" value="" id="input1_1" name="checkBlabla[]" readonly="true" dmx-bind:value="scBlabla.data.queryPaged.data[$value].blaID" checked="true">
                      <label class="form-check-label p-1 mb-1" for="input1_1" dmx-text="scBlabla.data.queryPaged.data[$value].BlablaNo">First checkbox</label>
                    </div>
                  </div>

this is how it looks in live, dynamically generated:

i hope am understanding your requirements correctly.

[UKRiggers]

Yes, cheers Nishkarsh