How to add status "active" or "Inactive" in sharepoint list items. By using sharepoint designer?

Question

i have a two select dropdowns and first has get the items from sharepoint list and when i click the move button selected item moved to second dropdown and when i click the save button status of sharepoint list is dynamically changed.if item is there in first dropdown status is "active" . If item is in second dropdown item status is "Inactive".please tell me how can i do that.?

i did this code only .soo,please tell me how can i do?

$(document).ready(function(){
ExecuteOrDelayUntilScriptLoaded(retrieveListItems,'sp.js');
});



var ItemContainer = { ItemList: [] };
 function retrieveListItems() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('States');
    var camlQuery = new SP.CamlQuery();
 //   camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');         
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
        Function.createDelegate(this, this.onListDataLoadQueryFailed));
}

function onListDataLoadQuerySucceeded(sender, args) { 

    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var tempItem = { ID: oListItem.get_id(), Value: 
oListItem.get_item('Title') };
        ItemContainer.ItemList.push(tempItem);
    }
   fillDropDown();
  }

function onListDataLoadQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + 
args.get_stackTrace());
}

 function fillDropDown() {
    var ddlCategory = document.getElementById('sct1');
    if (ddlCategory != null) {
        for (var i = 0; i < ItemContainer.ItemList.length; i++) {
            var theOption = new Option;
            theOption.value = ItemContainer.ItemList[i].ID;
            theOption.text = ItemContainer.ItemList[i].Value;
            ddlCategory.options[i] = theOption;
        }
    }
}



//for button function



   $(function(){function moveitems(origin,dest){
$(origin).find(':selected').appendTo(dest);
}
$("#move").click(function(){
moveitems('#sct1','#sct2');
});
});

i want like this type

score 0 · Accepted Answer · answered Dec 25 '18 at 06:48

The requirement seems so close as this one I tested, you may check my test solution.

<select id='selectItems' multiple='multiple'></select>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/SiteAssets/MultiSelectjQLib/multi-select.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script src="/SiteAssets/MultiSelectjQLib/jquery.multi-select.js"></script>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(custom, "sp.js");
        function custom() {
            var clientContext = new SP.ClientContext.get_current();
            //update list as your list
            var list = clientContext.get_web().get_lists().getByTitle("MultiSelectTest");
            //get the first item only, you may update the logic per you requirement
            var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
            clientContext.load(items);
            clientContext.executeQueryAsync(
                function () {
                    var listItemEnumerator = items.getEnumerator();
                    while (listItemEnumerator.moveNext()) {
                        var oListItem = listItemEnumerator.get_current();
                        var _Title = oListItem.get_item('Title');
                        var _Status = oListItem.get_item('Status');
                        var _ID = oListItem.get_item('ID');
                        if (_Status) {
                            $('#selectItems').append($("<option></option>").attr("value", _ID).text(_Title));
                        } else {
                            $('#selectItems').append($("<option selected></option>").attr("value", _ID).text(_Title));
                        }
                    }
                    $('#selectItems').multiSelect({
                        afterSelect: function (values) {
                            alert("Select value: " + values);
                            var oListItem = list.getItemById(values);
                            oListItem.set_item('Status', false);
                            oListItem.update();

                            clientContext.executeQueryAsync(
                               function () {
                                   alert('update complete');
                               },
                                function (sender, args) {
                                    console.log(args);
                                }
                            );
                        },
                        afterDeselect: function (values) {
                            alert("Deselect value: " + values);
                            var oListItem = list.getItemById(values);
                            oListItem.set_item('Status', true);
                            oListItem.update();

                            clientContext.executeQueryAsync(
                               function () {
                                   alert('update complete');
                               },
                                function (sender, args) {
                                    console.log(args);
                                }
                            );
                        }
                    })
                },
                    function (sender, args) {
                        console.log(args);
                    })
        }
    </script>

Thank you. code is working fine and i have a doubt. When we click the save button at that time the data will updated otherwise it doesn't updated and when we select the option in first box click move button it goes to another box otherwise it doesn't..thank u for the reply.... — user10766870, Dec 25 '18 at 12:59

How to add status "active" or "Inactive" in sharepoint list items. By using sharepoint designer?

1 Answers1