2

I am trying to use Bootstrap Dropdown list for replicating the Salesforce List Views functionality in Lightning components. I am able to achieve the functionality using ui:InputSelect but it is not appearing as per the htmls given by the UI/UX Team. I need to implement this using div class="dropdown" using button, ul and li tags.

Original Code:

<ui:inputSelect label="" aura:id="listViews" change="{!c.onSelectChange}"><ui:inputSelectOption text="{!$Label.c.OrderTabListAllOrders}" label="{!$Label.c.OrderTabListAllOrders}" value="true" />

It is appearing as below Using ui:inputSelect But I want it to appear as this.

Bootstrap Dropdown

I cannot use custom CSS since this would hamper the look of the overall page where I will plugin my component.

  • Please provide more clarity when you mean the appearance is not as per the one provided by UI/UX team. Its difficult to provide any help without knowing how it would look like. – RedDevil May 8 '17 at 8:41
  • I guess he is looking for something similar to this v4-alpha.getbootstrap.com/components/dropdowns , a drop down with a button – Last Viking May 8 '17 at 9:03
1

You could do something as follows to get your bootstrap styled options. You can use the bootstrap HTML elements and then bind the events with aura controllers. It would work just fine.

App

<aura:application >
    <ltng:require styles="{!join(',', $Resource.Bootstrap + '/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css')}" 
                  scripts="{!join(',', $Resource.jquery, $Resource.tether, $Resource.Bootstrap + '/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js')}" />

    <aura:attribute name="options" type="String[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <aura:iteration items="{!v.options}" var="item">
                <a class="dropdown-item" href="" onclick="{!c.handleclick}">{!item}</a>
            </aura:iteration>
        </div>
    </div>
</aura:application>

Controller.js

({
    doInit : function(component, event, helper) {
        /*do your action callbacks*/
        var options = ["Car", "Saab", "Volvo"];
        component.set("v.options",options);
    },
    handleclick : function(component, event, helper){
        var selected = event.srcElement.text;
        console.log(selected);
    }
})

Update (Sample):

before after

Once you click on the links , you should be able to get the selected values, I have checked the same for locker compatibility as well.

  • @Anant : This will exactly do the thing that you have provided. It will show a button first and the toggling of menu is taken care of the bootstrap js and also you dont have to use any custom css as bootstrap css has been applied. all you need is to use the same mark-up in the component and bind the events with the aura js controller – Last Viking May 8 '17 at 11:03
  • I tried with the above code in the component and the js controller file but it does not seem to work. The page is breaking. – Anant May 8 '17 at 14:12
  • do check the update above, and do share the errors that you are getting. Also ensure the static resources are referenced properly. adding your controllers and components markup would help. – Last Viking May 8 '17 at 14:54
  • Your answer was partially correct till the generation of the dropdown values and the look and feel. But var selected = event.srcElement.text; would return null values. I had to initialize the id for each of the iteration items and then bind it to a list for options and separate Map for getting the name and displayed value. – Anant May 9 '17 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.