CatalogBox - ComboBox development idea

    The programmer should simplify the life of the user, not himself.
    (of course, there are nuances)

    Author of the article

    Was a combobox


    The article describes the idea of ​​visual web control for selecting an item from a list. This idea about how to evolve ComboBox(he is DropDown, he's selectin the html) to improve the software user-friendliness - to control the choice has become much easier and friendlier in the selection of complex objects of the great and not-so list. After all, the task of the programmer is to continuously improve and simplify the life of the user.

    This is an idea whose implementation is only partial and only for ASP.NET Web Forms in conjunction with devexpress - since I have a large background on this particular technology bundle.

    This article is not for those who want to copy-paste the code, press F5 and see the result. It would be most correct to attribute it to documents that are calledFunctional Requirements or even Functional Design . Therefore, if you are interested in a look at the evolution of convenience, then I hope the article will be useful.

    ComboBox evolution - what is already there


    First, I’ll give a list of convenient features that are already in good implementations of visual controls. This section is nothing new, only a description of the functionality already implemented in the advanced libraries of visual controls.

    For example, devexpress features with respect selectto html are as follows (in my opinion, in order to reduce the need, that is, the most important thing first):

    • Filter by the entered line:



      As the characters are entered into the control, the list is filtered. Here are the comments:

      - By what fields to check the entry of the entered string? If you check for those that are not displayed in the control, then the user may not be obvious behavior. But sometimes this may be required. And if the user enters a string containing a border when fields are concatenated? That is, if the name of the employee is displayed, say, “Chernyaev Konstantin”, and the name and surname are stored in different data fields, and the user enters “yaev kons” (here and below the case of characters does not matter - I think that when searching for text this is the standard de facto). It would be friendly on the part of the control to find this entry:



      - Usually sortingdo alphabetically. And when the user enters a string (such as "table"), and an element in the list is, and there are some elements that this line include, but are not equal to her ( " Area B", "apo table ", "pi table is ”), Then it turns out that the user has to scroll through the list, choosing the one you need (and the order in this example would be:“ apo table ”,“ pi table ”,“ table ”,“ table b ”). Moreover, it is impossible to clarify the request and narrow the list. If the list is large, this is a big minus to friendliness.
      The solution to this problem will be sorting on the basis of "equality / occurrence." That is, records equal to the entered line should go first, and then the rest. I would even go further - first equal, then starting on this line, then the rest.
    • Auto-completion, auto - selection of the first of the found:



      As you type, the control filters the data, shows them, and complements the entered text with the
      first of the found. If you lose focus, it will be selected.
      Note - if the user enters characters not from the beginning of the line he needs, he will not be able to select it automatically.
    • You can enable the mode when you can write a new value that is not in the list. Otherwise, you cannot enter text for which no elements were found. It’s like a hint mode, when you can enter not only what is prompted.
      This mode simplifies the life of the user when he should be able to add a new value that is not a complex object - just a line. For example, the name. Or a position at the previous place of work - it can be any, but there is a list of already known positions.
    • The data source , that is, the list itself can be either a javascript array on the client (that is, already downloaded data), or an ajax request to the server (that is, when the client downloads the data exactly on demand).
    • Virtual scrolling - scroll a list without downloading all the data. Continuation of the previous paragraph. If there is a lot of data, then only visible elements are downloaded or with a small margin, and when you scroll through the list, the necessary ones are pumped.
      If there are a lot of elements in the list, then you should not store them all on the client - let them be tightened as necessary. And if it’s not enough, then you can download them and store them in the browser’s memory in advance when loading the page. How much is small, but how much is impossible to say ahead of time. We need an optimization balance when comparing “download all data at once” vs “download the next page when scrolling through the visible data window”.
    • It is possible to program buttons in the control, for example, “reset the value”, “next / previous element”. Or any other action the user needs. Example of adding custom buttons:



      In the combo in the screenshot, the usual triangle button is removed



      , but three user buttons are added.
    • Table view of the list:
      You can structure the displayed data and display not only the name of the element, but several of its fields.


    • Styles for cells in tabular form, icons , element templates :




    • We can also mention the possibility of selecting in the form of an ComboBoxelement from the hierarchical list, but this is a different control ( DropDownEdit , although the title has a Tree List Lookup ).

    ComboBox's Evolution - New


    Using these opportunities, I gradually came to the conclusion that there is not enough further evolution ComboBox':

    1. Easy addition of the “ Reset Value ” button . Without programming.
      Such a button is needed quite often, therefore it is convenient when it is added by assigning a simple booleancontrol property:



    2. Show that the selected value has been changed .
      Almost any text editor shows that the file has been modified and not saved. This feature seems convenient on the editing controls. This applies, of course, not only to ComboBox'a, but to all editors in general.



      It might be worth adding the ability to roll back the change in the edit control. Like cntr + z.
    3. Link to the page of the selected item . Unless, of course, the list item entity has its own page.

      For example, a user places an order and selects a pick-up point. And it is natural to want, when choosing, and even after choosing, to get full information about the selected item (address, how to get there, scheme and photo) without unnecessary gestures. Once you have realized this opportunity, you already want it in any combo box.

      It’s most convenient to write a regular tag next to the visual control

      i

      You can make the text of the selected value the link itself, but it’s not worth it - after all, when you click on a combo, the selection list usually opens. Although they do so, then to open the list the user needs to click on the triangle button

      .

      An example of the implementation of these three points: An



      asterisk means that the value has been changed (you can display it both in captionand to the right of the control, this is a matter of the style of a specific project - usually, an asterisk means that the value is required for selection), a red cross - the “Reset” button value ", i - link to the card of the selected branch, a button with an ellipsis - for point 4.
    4. If the entity has a catalog page with the capabilities of various filters, convenient visualization, paging, sorting etc - make a choice using this catalog page . This dramatic improvement makes ComboBoxCatalogBox'ohm ComboBox' the 21st century.

      For example, the user selects the client to substitute in the contract and ComboBoxsearches for the information displayed (say, the number and name of the client), and the user does not know the name, only, for example, TIN, or phone number, or even just the name of the director of the legal entity sought. Then he opens the client directory page, searches for the desired one using filters, copies the client’s number / code / name, closes the directory, inserts from the buffer into ComboBox. But our task is to make it more convenient for the user (see epigraph).

      And for the user it will be convenient to open the directory in a modal window when you click on a special button on CatalogBox'e (the ellipsis button

      ).

      Example of a catalog page:



      In the screenshot, the catalog is opened in a modal window after clicking on the ellipsis button.
      But the catalog page itself should not be tied to a modality - it should be openable separately and independently, or in a modal window. In the modal window, the grid should be able to highlight one selected row (or several), after which the "Select" button becomes active (it is in the screenshot disabledbecause the selection has not been made). When it is pressed, the selected value is substituted into ComboBox, that is, now CatalogBox.
    5. Sometimes you need to select multiple items from a list. It’s like CheckBoxList( pictures ), but since there is CatalogBoxand you can make a choice with convenient filters, I want to have multiple onesCatalogBox . Here the functions are natural: add, remove. Sometimes you need to enter validation on the number of selected elements - extension required.

      For example, you need to add products to the order and you want to enable the user to select several at once, but it is CheckBoxListinconvenient due to the large number of products. Then it will be convenient for the user in the catalog using filters to select several products, click "Add", and then, if necessary, add more.
      Visual example:



      As you can see, in the left column of the grid isCheckBox- This way you can select multiple items.

      This feature already completely breaks ComboBox- it is not intended to store several selected values. For the general case, we obtain a creative inventive task that is variable in implementation.

      I will give a visual example of the choice made.
      - If 1 element



      is selected : - If 2 elements are selected:



      - And so you can view the list of selected elements and delete unnecessary:


    6. Sometimes you need to be able to select one item from two lists .
      For example, you need to choose who will deliver the order - either a third-party company or your courier. You can enter a common parent entity ("delivery executor"), but there is no point in the catalog page for it. Therefore, it turns out to be necessary to choose one ComboBoxof the different lists.

      It is most convenient for the user to make this choice on one control CatalogBox, but make 2 (or more) buttons that open different pages-directories (of different entities). And as a value to store not only the selected object, but also its essence.

      Example:



      Otherwise, everything is the same as before - just select buttons are added to the ellipsis button.
    7. As a combination of the previous two points, heterogeneous multiple choice .
      For example, if you need to select several delivery providers from the example of the previous paragraph.

    In almost any web application, the first 4 points are very necessary - the “reset value" button, highlighting the changes, a link to the page of the selected item, and selecting with full filters. The remaining additions are far from needed for all projects. But for a large information system, all the points seem necessary in any case.

    Full Functional Requirements


    Catalogbox


    1. Triangle button (showing the list as a normal drop-down list):

      a. Ability to set, show or not the triangle button.
      For large lists, the “show the whole list” button may not matter much, only the filtered list matters. And to choose a criterion, whether it is a large list or not, the interface architect should, and not the control itself - therefore, configuration is needed.
      b. For a heterogeneous choice (choosing a value from two lists), you must either make more than one triangle button, or none if ellipsis buttons (opening a modal catalog page) are created.
      c. Whether to open the list when clicking on control.
      d. Whether to open the list with focus on control.
    2. X-button (resetting the selected value).

      a. It is associated with validation. If a choice is required, then there should be no cross.
      b. For multiple selections, clear all selections. It is also worth making a delete button for one selected value.
    3. Entering text in the control and selecting an element:

      Such behavior seems ideal. The user enters text, the elements are searched, the found ones are shown (taking into account the authorization filter, the specified filter, the filter from selecting values ​​in other controls, the virtual scrolling window settings). When the focus is lost, the following
      is selected: - Nothing was found: the choice does not change.
      - 1 item found: it is selected.
      - Found more than 1: setting: either the first or the one selected before is selected.
      Select an element with the mouse, scroll, arrow -enter. The list is either complete or swap as needed (virtual scrolling).
    4. Search for elements, filters:
      Filter by the entered line - sorting: 1) the name is equal to the entered line, 2) the name begins with it, 3) ends with it, 4) inside it.

      Required filters:

      a. The set constant filter for this instance of control;
      b. A filter produced by other page controls;
      c. Authorization Filter. This filter should be superimposed on the server side - this is a security rule.
      Transferring all of these filters to the catalog page indicating that the user must not change them.
    5. Displaying found items:

      a. Ability to table view, cell templates, styles / formats.
      b. Selects the found text in the element.
    6. Display of the selected (selected with multiple choice) element:
      Theoretically possible options:
      - template for js-analog string.Formatwith paths (for example, " {Name} ({Id})");
      - text jsfunction;
      - Html template.
      If we stay within the original html tag select, then only text options are possible, and if the markup is completely custom, then there is room for imagination.
    7. The “value is changed” marker with showing the old value in title(tooltip).
    8. Titleor baloonto display information about the selected item that did not fit in the visible area of ​​the box.
    9. Link to the page of the selected item.
      Keep in mind that not all entities have a page (but all elements, if any, have an entity).
    10. Ellipsis button.
      Opens the directory page of this entity in a modal window. After selecting an item in the catalog, it is passed to the CatalogBox.
    11. Heterogeneous choice.
      More than one ellipsis button that opens different directories in a modal window. Setting icons for buttons title.
    12. Multiple choice.
      Displaying more than one selected value, delete one or all at once.
    13. Diverse multiple choice.
    14. If the style of the site requires it, then show the buttons only when you mouse over CatalogBox.
    15. Validation Show invalid status only after pressing a button.

    Catalog page


    1. It can be opened both independently, by reference, and modally, by clicking on the ellipsis button.
    2. Filter as an external parameter, in querystring. Filter capabilities should allow the filtering needed for CatalogBox'a.
    3. Button “save filter to clipboard” - to send a link that will open a precisely selected list.
      You can also save sorting and paging in querystring.
    4. A parameter that determines whether the transferred filter can be changed for the user (only the transmitted one). It is necessary so that it CatalogBoxcan open its own directory in which the user could not select anything forbidden.
    5. For modal mode, the parameter is single / multiple selection.
      For multiple choice, most likely the most convenient option for the user is to show checkboxfor each element.
    6. The way to display a list of items is usually grid. But it can be listeither or tree.
    7. Refresh button - so that you can refresh the list without refreshing the page, that is, without dropping the selected filters.
    8. Button "reset filter". But do not reset the filters passed in the external parameter from p2.

      For modal mode (i.e. when connected to CatalogBox'ohm):

    9. Without a header, without a footer, menu and other things that do not directly affect the selection of an element.
    10. All links on the page should open in a new window / tab ( target=”_blank”).
    11. Select button. Not yet selected any item disabled. When the first one is selected, it becomes active. When pressed in any way, it sends the selected element (or elements) to the spawned CatalogBox'y.
    12. Cancel button. When clicked, closes the modal window. Just like the cross button.
    13. When you reopen, there are two options - reload the page or not reload, so that the filters / sorting / paging remain selected.
    14. Display taking into account authorization - some part of the list of elements may not be available to the user. Or even some filters. But this is a rule for the entire site, the catalog page here is no different.

    PS


    Colleagues, I ask you, if you know where similar functionality for selecting an object is implemented using a fully functional catalog page, write in comments. I have never seen such implementations anywhere - at least in the web world.

    Also popular now: