Checkbox in dropdown to select multiple attribute values

kawishabbas — Tue, 10 Aug 2021 10:34:28 GMT

Hello,

Please suggest what is the procedure to create a dropdown checkbox to select multiple values from the table. I have created a dropdown list that shows customer status. Users can select the online status to reflect the record of online customer to the map as it is there are multiple statuses that can be select one by one.

Now, I want to create a checkbox with the dropdown list. User want to select multiple status at a time.

Please suggest or help me to find out the solution.

import React, { Component } from 'react'; import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem,Dropdown,DropdownToggle, DropdownMenu,DropdownItem,UncontrolledDropdown} from 'reactstrap'; import { NavLink } from 'react-router-dom'; import { authenticationService } from '../_services/authentication'; class Header extends Component { constructor(props) { super(props); this.state = { isNavOpen: false, dropdownOpen:false, south:null, north:null, central:null, alarminfo:'', status:false, show:false }; this.toggleNav = this.toggleNav.bind(this); this.toggleDrop = this.toggleDrop.bind(this); } logout = () => { authenticationService.logout(); } toggleNav() { this.setState({ isNavOpen: !this.state.isNavOpen // true }); } toggleDrop() { this.setState({ isNavOpen: !this.state.isNavOpen // true }); } selectLayer = (e) => { let _this = this if(this.props.loginRole.data.role === 'Admin'){ let customerQuery = this.props.item.customer.data var query = customerQuery.createQuery(); let centerCustomerQuery = this.props.centerItem.centerCustomer.data var centerQuery = centerCustomerQuery.createQuery(); let northCustomerQuery = this.props.northItem.northCustomer.data var northQuery = northCustomerQuery.createQuery(); if(e.target.value === "clear"){ /* this.props.view.goTo({ target:[67.116733,24.898892], zoom:14 }) */ let clearQuery = "status = 'Active'" customerQuery.definitionExpression = clearQuery centerCustomerQuery.definitionExpression = clearQuery northCustomerQuery.definitionExpression = clearQuery query.where = clearQuery customerQuery.queryFeatures(query) .then(function(response){ _this.setState({ show:true }) _this.props.alarmInfo(_this.state) }); centerQuery.where = clearQuery centerCustomerQuery.queryFeatures(centerQuery) .then(function(response){ _this.setState({ show:true }) _this.props.alarmInfo(_this.state) }); northQuery.where = clearQuery northCustomerQuery.queryFeatures(northQuery) .then(function(response){ _this.setState({ show:true }) _this.props.alarmInfo(_this.state) }); query.where = clearQuery centerQuery.where = clearQuery northQuery.where = clearQuery } else { //var queryExpression = `status = '${e.target.value}'` var queryExpression = `alarmstate = ${e.target.value} AND status = 'Active'` // South customerQuery.definitionExpression = queryExpression query.where = queryExpression customerQuery.queryFeatures(query) .then(function(response){ if (response.features[0].attributes.alarmstate === 0){ _this.setState({ alarminfo:'Online', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 1){ _this.setState({ alarminfo:'Powered Off', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 2){ _this.setState({ alarminfo:'Link Down', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 3){ _this.setState({ alarminfo:'GEM Packet Loss', south:response.features.length, status:true, show:false }) }else if (response.features[0].attributes.alarmstate === 4){ _this.setState({ alarminfo:'Low Optical Power', south:response.features.length, status:true, show:false }) }else _this.setState({ alarminfo:response.features[0].attributes.alarminfo, south:response.features.length, status:true, show:false }) _this.props.alarmInfo(_this.state) }); // Central centerCustomerQuery.definitionExpression = queryExpression centerQuery.where = queryExpression centerCustomerQuery.queryFeatures(centerQuery) .then(function(response){ _this.setState({ central:response.features.length, show:false }) _this.props.alarmInfo(_this.state) }); // North northCustomerQuery.definitionExpression = queryExpression northQuery.where = queryExpression northCustomerQuery.queryFeatures(northQuery) .then(function(response){ _this.setState({ north:response.features.length, show:false }) _this.props.alarmInfo(_this.state) }); query.where = queryExpression centerQuery.where = queryExpression northQuery.where = queryExpression } } else { let customerQuery = this.props.item.customer.data var query = customerQuery.createQuery(); if(e.target.value === "clear"){ let clearQuery = "1=1" customerQuery.definitionExpression = clearQuery query.where = clearQuery } else { //var queryExpression = `status = '${e.target.value}'` var queryExpression = `alarmstate = ${e.target.value} AND status = 'Active'` customerQuery.definitionExpression = queryExpression query.where = queryExpression } } } render() { return( <div> <Navbar color="dark" dark expand="md"> <NavbarToggler onClick={this.toggleNav} /> <NavbarBrand style={{color:'#1f91f3'}}>Transworld</NavbarBrand> <Collapse isOpen={this.state.isNavOpen} navbar> <Nav className="ml-auto" navbar> <UncontrolledDropdown nav inNavbar> <DropdownToggle style={styles.dropToggle} nav caret> Customer Status </DropdownToggle> <DropdownMenu onClick={(e)=> this.selectLayer(e)} style={{background:"#343a40"}} center> <DropdownItem value = "clear" style={styles.dropItem}>Clear Selection</DropdownItem> <DropdownItem value='0' style={styles.dropItem}>Online</DropdownItem> <DropdownItem value='1' style={styles.dropItem}>Powered Off</DropdownItem> <DropdownItem value='2' style={styles.dropItem}>Link Down</DropdownItem> <DropdownItem value='3' style={styles.dropItem}>GEM Packet Loss</DropdownItem> <DropdownItem value='4' style={styles.dropItem}>Low Optical Power</DropdownItem> </DropdownMenu> </UncontrolledDropdown> <NavItem> <NavLink className="nav-link" to='/login' onClick={this.logout}><span className="fa fa-sign-in fa-lg"></span> Logout</NavLink> </NavItem> </Nav> </Collapse> </Navbar> </div> ); } } const styles = { dropToggle:{ background:"#343a40", color:"#1f91f3", }, dropItem:{ color:"#1f91f3", } } export default Header;

Regards,

Kawish

Re: Checkbox in dropdown to select multiple attribute values

BlakeTerhune — Tue, 10 Aug 2021 14:29:47 GMT

Maybe checkboxes would work better than a dropdown.

<div class="checkboxContainer"> <input type="checkbox" id="online" name="online"> <label for="online">Online</label> <br /> <input type="checkbox" id="poweredOff" name="poweredOff"> <label for="poweredOff">Powered Off</label> <br /> <input type="checkbox" id="linkDown" name="linkDown"> <label for="linkDown">Link Down</label> <br /> <input type="checkbox" id="gemPacketLoss" name="gemPacketLoss"> <label for="gemPacketLoss">GEM Packet Loss</label> <br /> <input type="checkbox" id="lowOpticalPower" name="lowOpticalPower"> <label for="lowOpticalPower">Low Optical Power</label> <br /> </div>

If you have a big list of options, you can make it scrollable.

.checkboxContainer { border:2px solid #ccc; width:200px; height: 100px; overflow-y: scroll; }

Re: Checkbox in dropdown to select multiple attribute values

kawishabbas — Wed, 11 Aug 2021 18:16:09 GMT

Thanks, @BlakeTerhune for your kind reply.

My question is that when I applied the checkbox instead of the selection tag then how can I change my javascript code, especially queryExpression mentioned in line number 105.
When the user checked more than two checkboxes, queryExpression should be changed and display data to the map.

Reagrds,

Kawish

Re: Checkbox in dropdown to select multiple attribute values

BlakeTerhune — Wed, 11 Aug 2021 20:41:35 GMT

Use querySelectorAll() to get the checked inputs by name attribute with "input[name='status']:checked"

Then you can loop over the elements to get the value. I updated my html so they all have the same name attribute for easy identifying.

<div class="checkboxContainer"> <input type="checkbox" id="online" name="status"> <label for="online">Online</label> <br /> <input type="checkbox" id="poweredOff" name="status"> <label for="poweredOff">Powered Off</label> <br /> <input type="checkbox" id="linkDown" name="status"> <label for="linkDown">Link Down</label> <br /> <input type="checkbox" id="gemPacketLoss" name="status"> <label for="gemPacketLoss">GEM Packet Loss</label> <br /> <input type="checkbox" id="lowOpticalPower" name="status"> <label for="lowOpticalPower">Low Optical Power</label> <br /> </div>

const checkboxes = document.querySelectorAll("input[name='status']:checked"); let values = []; checkboxes.forEach((checkbox) => { values.push(checkbox.value); }); console.log(values);

You'll need some kind of a submit button to know when the user has finished checking the options, which will be the event trigger for updating your queryExpression. Here's the source for the logic I referenced.

Re: Checkbox in dropdown to select multiple attribute values

kawishabbas — Sat, 14 Aug 2021 13:25:59 GMT

Yeah,

It is working. Thanks, a lot @BlakeTerhune

topic Re: Checkbox in dropdown to select multiple attribute values in ArcGIS JavaScript Maps SDK Questions

Checkbox in dropdown to select multiple attribute values

Re: Checkbox in dropdown to select multiple attribute values

Re: Checkbox in dropdown to select multiple attribute values

Re: Checkbox in dropdown to select multiple attribute values

Re: Checkbox in dropdown to select multiple attribute values