mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
8.8 KiB
1 lines
8.8 KiB
"use strict";(self.webpackChunknoco_docs=self.webpackChunknoco_docs||[]).push([[1179],{3905:(e,t,i)=>{i.d(t,{Zo:()=>c,kt:()=>m});var l=i(67294);function o(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function n(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,l)}return i}function a(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach((function(t){o(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function r(e,t){if(null==e)return{};var i,l,o=function(e,t){if(null==e)return{};var i,l,o={},n=Object.keys(e);for(l=0;l<n.length;l++)i=n[l],t.indexOf(i)>=0||(o[i]=e[i]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(l=0;l<n.length;l++)i=n[l],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(o[i]=e[i])}return o}var s=l.createContext({}),d=function(e){var t=l.useContext(s),i=t;return e&&(i="function"==typeof e?e(t):a(a({},t),e)),i},c=function(e){var t=d(e.components);return l.createElement(s.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return l.createElement(l.Fragment,{},t)}},f=l.forwardRef((function(e,t){var i=e.components,o=e.mdxType,n=e.originalType,s=e.parentName,c=r(e,["components","mdxType","originalType","parentName"]),p=d(i),f=o,m=p["".concat(s,".").concat(f)]||p[f]||u[f]||n;return i?l.createElement(m,a(a({ref:t},c),{},{components:i})):l.createElement(m,a({ref:t},c))}));function m(e,t){var i=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=i.length,a=new Array(n);a[0]=f;var r={};for(var s in t)hasOwnProperty.call(t,s)&&(r[s]=t[s]);r.originalType=e,r[p]="string"==typeof e?e:o,a[1]=r;for(var d=2;d<n;d++)a[d]=i[d];return l.createElement.apply(null,a)}return l.createElement.apply(null,i)}f.displayName="MDXCreateElement"},88161:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>u,frontMatter:()=>n,metadata:()=>r,toc:()=>d});var l=i(87462),o=(i(67294),i(3905));const n={title:"Multi Select",description:"This article explains how to create & work with a Multi select field.",tags:["Fields","Field types","Select based types","Multi select"],keywords:["Fields","Field types","Select based types","Multi select","Create multi select field"]},a=void 0,r={unversionedId:"fields/field-types/select-based/multi-select",id:"fields/field-types/select-based/multi-select",title:"Multi Select",description:"This article explains how to create & work with a Multi select field.",source:"@site/docs/070.fields/040.field-types/030.select-based/020.multi-select.md",sourceDirName:"070.fields/040.field-types/030.select-based",slug:"/fields/field-types/select-based/multi-select",permalink:"/fields/field-types/select-based/multi-select",draft:!1,editUrl:"https://github.com/nocodb/nocodb/tree/develop/packages/noco-docs/docs/docs/070.fields/040.field-types/030.select-based/020.multi-select.md",tags:[{label:"Fields",permalink:"/tags/fields"},{label:"Field types",permalink:"/tags/field-types"},{label:"Select based types",permalink:"/tags/select-based-types"},{label:"Multi select",permalink:"/tags/multi-select"}],version:"current",sidebarPosition:20,frontMatter:{title:"Multi Select",description:"This article explains how to create & work with a Multi select field.",tags:["Fields","Field types","Select based types","Multi select"],keywords:["Fields","Field types","Select based types","Multi select","Create multi select field"]},sidebar:"tutorialSidebar",previous:{title:"Checkbox",permalink:"/fields/field-types/select-based/checkbox"},next:{title:"Rating",permalink:"/fields/field-types/select-based/rating"}},s={},d=[{value:"Create a multi select field",id:"create-a-multi-select-field",level:2},{value:"Configure color for options",id:"configure-color-for-options",level:3},{value:"Re-order options",id:"re-order-options",level:3},{value:"Edit options",id:"edit-options",level:3},{value:"Delete options",id:"delete-options",level:3},{value:"Similar select based fields",id:"similar-select-based-fields",level:2}],c={toc:d},p="wrapper";function u(e){let{components:t,...n}=e;return(0,o.kt)(p,(0,l.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"Multi Select")," fields allow you to select multiple options from a list of options. The options can be defined in the field configuration."),(0,o.kt)("h2",{id:"create-a-multi-select-field"},"Create a multi select field"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Click on ",(0,o.kt)("inlineCode",{parentName:"li"},"+")," icon to the right of ",(0,o.kt)("inlineCode",{parentName:"li"},"Fields header")),(0,o.kt)("li",{parentName:"ol"},"On the dropdown modal, enter the field name (Optional)."),(0,o.kt)("li",{parentName:"ol"},"Select the field type as ",(0,o.kt)("inlineCode",{parentName:"li"},"MultiSelect")," from the dropdown."),(0,o.kt)("li",{parentName:"ol"},"Click on ",(0,o.kt)("inlineCode",{parentName:"li"},"Add option")," button to add options."),(0,o.kt)("li",{parentName:"ol"},"Set default value for the field. The options are populated in the dropdown. Since its multi select, you can select multiple options as default value (Optional)."),(0,o.kt)("li",{parentName:"ol"},"Click on ",(0,o.kt)("inlineCode",{parentName:"li"},"Save Field")," button.")),(0,o.kt)("p",null,(0,o.kt)("img",{alt:"image",src:i(33646).Z,width:"2874",height:"1554"})),(0,o.kt)("admonition",{type:"note"},(0,o.kt)("p",{parentName:"admonition"},"Use of ",(0,o.kt)("inlineCode",{parentName:"p"},",")," is not allowed for option values.")),(0,o.kt)("h3",{id:"configure-color-for-options"},"Configure color for options"),(0,o.kt)("p",null,"You can re-configure background color for each option. This is useful when you want to highlight certain options. For example, you can configure ",(0,o.kt)("inlineCode",{parentName:"p"},"High")," option to have ",(0,o.kt)("inlineCode",{parentName:"p"},"red")," background color.\nTo configure, click on the ",(0,o.kt)("inlineCode",{parentName:"p"},"color")," icon next to the option. Select the color from the color picker and click on ",(0,o.kt)("inlineCode",{parentName:"p"},"Save Field")," button."),(0,o.kt)("p",null,(0,o.kt)("img",{alt:"image",src:i(71343).Z,width:"2876",height:"1506"})),(0,o.kt)("h3",{id:"re-order-options"},"Re-order options"),(0,o.kt)("p",null,"You can re-order options by dragging and dropping the options. To re-order, click on the ",(0,o.kt)("inlineCode",{parentName:"p"},"drag")," icon next to the option and drag it to the desired position. Click on ",(0,o.kt)("inlineCode",{parentName:"p"},"Save Field")," button to save the order."),(0,o.kt)("p",null,(0,o.kt)("img",{alt:"image",src:i(3176).Z,width:"2874",height:"1554"})),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"},"The order defined for the options will be used in cells dropdown as well.")),(0,o.kt)("h3",{id:"edit-options"},"Edit options"),(0,o.kt)("p",null,"You can rename options by clicking on the associated option text box. Click on ",(0,o.kt)("inlineCode",{parentName:"p"},"Save Field")," button to save the changes."),(0,o.kt)("h3",{id:"delete-options"},"Delete options"),(0,o.kt)("p",null,"You can delete options by clicking on the ",(0,o.kt)("inlineCode",{parentName:"p"},"x")," icon next to the option. You can undo the delete by clicking on the ",(0,o.kt)("inlineCode",{parentName:"p"},"undo")," icon next to the option. Click on ",(0,o.kt)("inlineCode",{parentName:"p"},"Save Field")," button to save the changes."),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("ul",{parentName:"admonition"},(0,o.kt)("li",{parentName:"ul"},"On removing an option, the option value will be removed from all the cells."),(0,o.kt)("li",{parentName:"ul"},"If the option value is set as default value for the field, then the default value will be removed."))),(0,o.kt)("p",null,(0,o.kt)("img",{alt:"image",src:i(54381).Z,width:"2878",height:"1550"})),(0,o.kt)("h2",{id:"similar-select-based-fields"},"Similar select based fields"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/fields/field-types/select-based/single-select"},"Single select"))))}u.isMDXComponent=!0},33646:(e,t,i)=>{i.d(t,{Z:()=>l});const l=i.p+"assets/images/multiselect-d61aaaf3d7f5175b899af60f0ecd6225.png"},71343:(e,t,i)=>{i.d(t,{Z:()=>l});const l=i.p+"assets/images/options-change-colour-08270506854710a13f2945a006fd3779.png"},54381:(e,t,i)=>{i.d(t,{Z:()=>l});const l=i.p+"assets/images/options-remove-9e5b6dcf0682be419ac34c21db0b5716.png"},3176:(e,t,i)=>{i.d(t,{Z:()=>l});const l=i.p+"assets/images/options-reorder-1ee3cf6240593e4055bd781a0c116949.png"}}]); |