@directus/app 9.15.0 → 9.16.1

package/dist/assets/index.4894f51e.js

@@ -0,0 +1 @@
+import{a as s,o as c,b as r,w as t,g as e,e as o,B as i}from"./runtime-core.esm-bundler.e3d5f5b7.js";const u={class:"markdown-body"},h=e("blockquote",null,[e("p",null,[i("Fields are database columns. Fields also enable you to manage the backend logic "),e("em",null,"(such as conditional display logic, input verification rules, etc.)"),i(" and frontend design used to display its data "),e("em",null,"(e.g., whether data will display in a table or on a map)"),i(".")])],-1),f=e("h2",{id:"overview",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#overview"},"#"),i(" Overview")],-1),p=e("video",{title:"Fields Overview",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/data-model-20220805/fields-20220805A.mp4",type:"video/mp4"})],-1),_=e("p",null,[i("To access a collection\u2019s fields, navigate to "),e("strong",null,"Settings > Data Model > [Collection]"),i(". From here, you can click a field to access its "),e("strong",null,"Configuration Drawer"),i(" and make advanced configurations. You also have the following controls for each field.")],-1),m=e("strong",null,"Fields and Layout",-1),g=i(" \u2014 Create, view, and configure a collection\u2019s fields as well as adjust how they are displayed and ordered on the "),v=i("Item Details Page"),y=i(". This section also provides access to the "),w=e("strong",null,"Field Context Menu",-1),b=i(" and "),C=e("strong",null,"Field Configuration Drawer",-1),F=i(", described below."),D=e("p",null,[e("strong",null,[i("Field Context Menu "),e("span",{mi:"",icon:""},"more_vert")]),i(" \u2014 Contains the following controls:")],-1),k=e("ul",null,[e("li",null,[e("a",{href:"#configure-a-field"},[e("span",{mi:"",icon:""},"edit"),i(" Edit Field")]),i(" \u2014 Opens the "),e("strong",null,"Field Configuration Drawer"),i(".")]),e("li",null,[e("a",{href:"#duplicate-a-field"},[e("span",{mi:"",icon:""},"content_copy"),i(" Duplicate Field")]),i(" \u2014 Duplicates a field along with all of its configuration options.")]),e("li",null,[e("a",{href:"#toggle-field-visibility-for-admins"},[e("span",{mi:"",icon:""},"visibility_off"),i(" Hide Field on Detail")]),i(" \u2014 Toggle field visibility on the Item Detail Page for Admin Users.")]),e("li",null,[e("a",{href:"#adjust-field-width"},"Width"),i(" \u2014 Fields have three different width options: "),e("ul",null,[e("li",null,[e("span",{mi:"",icon:""},"border_vertical"),i(" Half Width \u2014 The field input is shown at half the form width. ")]),e("li",null,[e("span",{mi:"",icon:""},"border_right"),i(" Full Width \u2014 The default. The field input is shown at the full form width. ")]),e("li",null,[e("span",{mi:"",icon:""},"aspect_ratio"),i(" Fill Width \u2014 The field input is shown filling the full width of the page area. ")])])])],-1),T=e("p",null,[e("strong",null,"The Field Configuration Drawer"),i(" \u2014 Provides all "),e("a",{href:"#configure-a-field"},"field configuration"),i(" options.")],-1),A=e("h2",{id:"create-a-field-(standard)",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#create-a-field-(standard)"},"#"),i(" Create a Field (Standard)")],-1),x=e("video",{title:"Create a Field (Standard)",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/create-a-field-20220805A.mp4",type:"video/mp4"})],-1),S=e("p",null,[i("To make field configuration as intuitive and easy as possible, a template wizard is provided so that you can create fields pre-configured for common use-cases. When you create a field this way, you will still have full power to "),e("a",{href:"#configure-a-field"},"configure the field"),i(" as desired.")],-1),N=e("ol",null,[e("li",null,[i("Navigate to "),e("strong",null,"Settings > Data Model > [Collection]"),i(".")]),e("li",null,[i("Under "),e("strong",null,"Fields & Layout"),i(", click the "),e("strong",null,"Create Field"),i(" button."),e("br"),i(" A side drawer will open, with various pre-configured Interfaces to choose from.")]),e("li",null,"Click to select the desired field and a basic configuration menu will open."),e("li",null,[i("Add a "),e("strong",null,"Field Key"),i(", "),e("em",null,"which is also used as the default field name"),i("."),e("br"),i(" Optional: Configure the other field details as desired."),e("br"),i(" Optional: Click "),e("a",{href:"#create-a-field-advanced"},"Continue in Advanced Field Creation Mode"),i(".")]),e("li",null,[i("When you are ready, click "),e("strong",null,"Save"),i(" to confirm.")])],-1),W=e("h2",{id:"create-a-field-(advanced)",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#create-a-field-(advanced)"},"#"),i(" Create a Field (Advanced)")],-1),M=e("video",{title:"Create a Field (Advanced)",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/create-a-field-advanced-20220805A.mp4",type:"video/mp4"})],-1),j=e("p",null,[i("This field creation method opens the "),e("strong",null,"Field Configuration Drawer"),i(" so you can customize every field detail from the start. To create a field in advanced mode, follow these steps.")],-1),I=e("ol",null,[e("li",null,[i("Navigate to "),e("strong",null,"Settings > Data Model > [Collection Name]"),i(".")]),e("li",null,[i("Under "),e("strong",null,"Fields & Layout"),i(", click the "),e("strong",null,"Create Field in Advanced Mode"),i(" button."),e("br"),i(" A dropdown menu will appear with various field types to choose from.")]),e("li",null,[i("Click to choose the field type and the "),e("strong",null,"Field Configuration Drawer"),i(" will open.")]),e("li",null,"Configure your field as desired."),e("li",null,[i("Click "),e("span",{mi:"",btn:""},"check"),i(" to confirm.")])],-1),P=e("div",{class:"tip hint"},[e("div",{class:"hint-title"},"Database Columns"),e("p",null,"Remember, a field is a database column. Therefore, you can create a column directly in the database and it will automatically appear within Directus. You can then enhance the experience further by configuring it as desired.")],-1),L=e("h2",{id:"configure-a-field",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#configure-a-field"},"#"),i(" Configure a Field")],-1),O=e("video",{title:"Configure a Field",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/configure-a-field-20220805A.mp4",type:"video/mp4"})],-1),V=e("p",null,[i("Fields are configured in the "),e("strong",null,"Field Configuration Drawer"),i(", which is composed of eight sections. These provide extensive customization options, from the database column\u2019s details, to how it is displayed and interacted with, and even custom input validation and conditional display logic. To configure a field, follow these steps.")],-1),H=e("li",null,[i("Navigate to "),e("strong",null,"Settings > Data Model > [Collection Name]"),i(".")],-1),B=e("li",null,[i("Under "),e("strong",null,"Fields & Layout"),i(", click the field you want to update."),e("br"),i(" The "),e("strong",null,"Field Configuration Drawer"),i(" will open.")],-1),U=i("Navigate to one of these sections and configure the field as desired: "),z=e("li",null,[e("strong",null,"Schema"),i(" \u2014 Defines the database column schema for the field.")],-1),E=e("li",null,[e("strong",null,"Relationship"),i(" \u2014 Controls "),e("em",null,"and only appears when configuring relational"),i(" field details.")],-1),R=e("li",null,[e("strong",null,"Translations"),i(" \u2014 Controls "),e("em",null,"and only appears when configuring translation"),i(" field details.")],-1),G=e("strong",null,"Field",-1),K=i(" \u2014 Sets details for the field input, which is displayed on the "),Y=i("item page"),q=i("."),J=e("li",null,[e("strong",null,"Interface"),i(" \u2014 Configures how you interact with the field\u2019s values.")],-1),Q=e("li",null,[e("strong",null,"Display"),i(" \u2014 Configures how field values are displayed in the Data Studio.")],-1),X=e("li",null,[e("strong",null,"Validation"),i(" \u2014 Creates a filter to determine valid user input.")],-1),Z=e("li",null,[e("strong",null,"Conditions"),i(" \u2014 Alters the current field\u2019s setup based on the values of other fields.")],-1),$=e("li",null,[i("Click "),e("span",{mi:"",btn:""},"check"),i(" to confirm.")],-1),ee=e("div",{class:"tip hint"},[e("div",{class:"hint-title"},"Fields in System Collections"),e("p",null,"While all out-of-the-box fields within system collections are locked from configuration or deletion, you are able to create new fields within system collections.")],-1),ie=e("h2",{id:"duplicate-a-field",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#duplicate-a-field"},"#"),i(" Duplicate a Field")],-1),te=e("video",{title:"Duplicate a Field",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/duplicate-a-field-20220805A.mp4",type:"video/mp4"})],-1),le=e("p",null,"To duplicate a field, follow these steps.",-1),oe=e("ol",null,[e("li",null,[i("Navigate to "),e("strong",null,"Settings > Data Model > [Collection Name]"),i(".")]),e("li",null,[i("Click the "),e("span",{mi:"",icon:""},"more_vert"),i(" icon for the field you want to duplicate.")]),e("li",null,[i("Click the "),e("span",{mi:"",icon:""},"content_copy"),i(),e("strong",null,"Duplicate Field"),i(" option.")]),e("li",null,"Choose the collection you\u2019d like to create the field in and set the Field Name.")],-1),ne=e("div",{class:"warning hint"},[e("div",{class:"hint-title"},"Relational and Primary Key Fields"),e("p",null,"Currently, it is not possible to duplicate relational fields or a collection\u2019s primary key.")],-1),se=e("div",{class:"tip hint"},[e("div",{class:"hint-title"},"Duplicates Configurations Only"),e("p",null,"When you duplicate a field, all of its configuration settings will be copied as well. However, values stored within that field will not be copied.")],-1),ae=e("h2",{id:"toggle-field-visibility-(for-admins)",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#toggle-field-visibility-(for-admins)"},"#"),i(" Toggle Field Visibility (for Admins)")],-1),de=e("video",{title:"Toggle Field Visibility (for Admins)",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/toggle-field-visibility-20220805A.mp4",type:"video/mp4"})],-1),ce=i("For users with any "),re=e("em",null,"non-admin",-1),ue=i(" role, a field\u2019s visibility can be adjusted via "),he=i("access permissions"),fe=i(". However, you may want to hide certain fields for admins as well. This is handy if the field is distracting or has no need to be seen on the item details page."),pe=e("h2",{id:"adjust-field-width",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#adjust-field-width"},"#"),i(" Adjust Field Width")],-1),_e=e("video",{title:"Group and Sort Field",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/adjust-field-width-20220805A.mp4",type:"video/mp4"})],-1),me=i("Adjusting the field width in "),ge=e("strong",null,"Fields and Layout",-1),ve=i(" will change field width on the "),ye=i("Item Detail Page"),we=i(". To adjust field width, follow these steps."),be=e("ol",null,[e("li",null,[i("Click "),e("span",{mi:"",icon:""},"more_vert"),i(" to open the field\u2019s context menu.")]),e("li",null,[i("Choose one of the following: "),e("ul",null,[e("li",null,[e("span",{mi:"",icon:""},"border_vertical"),i(" **Half Width** \u2014 The field is shown at half the form width. ")]),e("li",null,[e("span",{mi:"",icon:""},"border_right"),i(" **Full Width** \u2014 The default. The field is shown at the full form width. ")]),e("li",null,[e("span",{mi:"",icon:""},"aspect_ratio"),i(" **Fill Width** \u2014 The field is shown filling the full width of the page area. ")])])])],-1),Ce=e("h2",{id:"manually-sort-fields",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#manually-sort-fields"},"#"),i(" Manually Sort Fields")],-1),Fe=e("video",{title:"Group and Sort Field",autoplay:"",playsinline:"",muted:"",loop:"",controls:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/manually-sort-fields-20220805A.mp4",type:"video/mp4"})],-1),De=i("Adjusting the field order in "),ke=e("strong",null,"Fields and Layout",-1),Te=i(" will change its order on the "),Ae=i("Item Page"),xe=i(". To manually sort fields, click "),Se=e("span",{mi:"",icon:""},"drag_indicator",-1),Ne=i(" to drag and drop the field as desired."),We=e("h2",{id:"delete-a-field",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#delete-a-field"},"#"),i(" Delete a Field")],-1),Me=e("video",{autoplay:"",playsinline:"",muted:"",loop:"",controls:"",title:""},[e("source",{src:"https://cdn.directus.io/docs/v9/configuration/data-model/fields/fields-20220805/delete-a-field-20220805A.mp4",type:"video/mp4"})],-1),je=e("p",null,"To permanently delete a field and all its stored values, follow these steps.",-1),Ie=e("ol",null,[e("li",null,[i("Navigate to "),e("strong",null,"Settings > Data Model > [Collection Name]"),i(".")]),e("li",null,[i("Click the "),e("span",{mi:"",icon:""},"more_vert"),i(" icon for the field you want to delete.")]),e("li",null,[i("Click the "),e("span",{mi:"",icon:"",dngr:""},"delete"),i(),e("strong",null,"Delete Field"),i(" option.")]),e("li",null,[i("Confirm this decision by clicking "),e("strong",null,"Delete"),i(" in the dialog.")])],-1),Pe=e("div",{class:"danger hint"},[e("div",{class:"hint-title"},"Irreversible Change"),e("p",null,"This action is permanent and cannot be undone. Please proceed with caution.")],-1),Be="Fields",Ue=!1,ze={name:"index",setup(Le,{expose:a}){const n={title:"Fields",modularExtension:!1};return a({frontmatter:n}),(Oe,Ve)=>{const l=s("router-link"),d=s("docs-wrapper");return c(),r(d,{frontmatter:n},{default:t(()=>[e("div",u,[h,f,p,_,e("p",null,[m,g,o(l,{to:"/docs/app/content/collections#item-page"},{default:t(()=>[v]),_:1}),y,w,b,C,F]),D,k,T,A,x,S,N,W,M,j,I,P,L,O,V,e("ol",null,[H,B,e("li",null,[U,e("ul",null,[z,E,R,e("li",null,[G,K,o(l,{to:"/docs/app/content/items"},{default:t(()=>[Y]),_:1}),q]),J,Q,X,Z])]),$]),ee,ie,te,le,oe,ne,se,ae,de,e("p",null,[ce,re,ue,o(l,{to:"/docs/configuration/users-roles-permissions.md"},{default:t(()=>[he]),_:1}),fe]),pe,_e,e("p",null,[me,ge,ve,o(l,{to:"/docs/app/content#item-page"},{default:t(()=>[ye]),_:1}),we]),be,Ce,Fe,e("p",null,[De,ke,Te,o(l,{to:"/docs/app/content/collections#item-page"},{default:t(()=>[Ae]),_:1}),xe,Se,Ne]),We,Me,je,Ie,Pe])]),_:1})}}};export{ze as default,Ue as modularExtension,Be as title};