Skip to content

Commit

Permalink
h4->h3
Browse files Browse the repository at this point in the history
  • Loading branch information
benhaynes committed Mar 21, 2016
1 parent de3c44b commit 421bbe5
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 33 deletions.
2 changes: 1 addition & 1 deletion 01-getting-started/02-requirements.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Directus is a forward-looking framework and therefore may not support certain legacy systems. If your server is not compatible with the requirements below, please contact your host to upgrade.

* Apache HTTP Server
* mod_rewrite ([help](docs/4-troubleshooting/enable_mod_rewrite.md))
* mod_rewrite ([help](/docs/troubleshooting))
* PHP 5.5+
* curl
* gd
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
#Inputs & Interfaces
# Core Interfaces

User Interfaces (UIs) are how your users will interact with the different types of content in your database. Each field in your database has a data-type that determines what kind of content can be stored there – Directus uses this information to determine a default UI and any other UIs that are supported. In addition to the provided Core UIs, you can also easy create new Custom UIs for specific or complex use-cases.

### Text & Character Inputs
#### Text Input
----------

### Text Input
*Supported Datatypes: **`VARCHAR`**, `DATE`, `TIME`, `ENUM`*

A simple, basic, single-line text field for almost any kind of string data. The user is shown the remaining character count based on the length property of the column. Despite being so simple, a few key options make this UI one of the most useful and flexible:
Expand All @@ -18,14 +19,18 @@ A simple, basic, single-line text field for almost any kind of string data. The
* `validation_string`: Holds the CSV list of Whitelist/Blacklist characters or the RegEx value (based on the above option)
* `validation_message`: A message that is shown to the user if the validation fails

#### Text Area
----------

### Text Area
*Supported Datatypes: **`TEXT`**, `VARCHAR`*

A multi-line text field for longer plain-text data. New lines are saved in the database as new lines as this input does not create any HTML tags.

* `rows`: The number of text rows available for the input before scrolling

#### WYSIWYG
----------

### WYSIWYG
*Supported Datatypes: **`VARCHAR`**, `TEXT`*

A multi-line text field for longer HTML content with WYSIWYG formatting buttons. Each formatting button can be toggled on or off as needed.
Expand All @@ -34,7 +39,9 @@ A multi-line text field for longer HTML content with WYSIWYG formatting buttons.
* `height`: The input's height in pixels before scrolling. Default: 500px
* `available format buttons`: `bold`, `italic`, `underline`, `strikethrough`, `rule`, `create_link`, `insert_image`, `embed_video`, `embed_width`, `embed_height`, `html`, `ordered_list`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `blockquote`, `ul`, `ol`

#### Slug, or Short Name
----------

### Slug, or Short Name
*Supported Datatypes: **`VARCHAR`***

Often clean/semantic URLs will include a contextual identifier based on an item's title rather than the `id` alone. This UI automatically creates that URL-friendly value based on another input. For instance, if linked to the `title` column, as the user types "This, That & the Other!" the `slug` input would live-update to "this-that-the-other".
Expand All @@ -43,23 +50,29 @@ Often clean/semantic URLs will include a contextual identifier based on an item'
* `size`: Adjusts the max width of the input (Small, Medium, Large)
* `mirrored_field`: Enter the column name of the field the slug will pull it's value from

#### Password & Salt
----------

### Password & Salt
*Supported Datatypes: **`VARCHAR`***

This UI contains a masked input for entering a password, a second input to confirm the password, a "Generate New" button for optionally generating new secure passwords quickly, and a "Reveal Password" toggle to expose the password to the user in plain-text. This UI can also be linked to a "salt" column so that the password entered is securely hashed.

* `require_confirmation`: Toggles the second input ("Confirm Password"). On by default.
* `salt_field`: The name of the column to be used as a salt in the password hash. Default: `salt`

#### Numeric
----------

### Numeric
*Supported Datatypes: **`TINYINT`**, `INT`, `NUMERIC`, `FLOAT`, `YEAR`, `VARCHAR`, `CHAR`, `DOUBLE`, `BIGINT`*

**TODO: Combine with `text-field`**. A simple input that only accepts number characters. Alternatively you could use the `text-input` UI and set the appropriate validation.

* `size`: Adjusts the max width of the input (Small, Medium, Large)
* `allow_null`: Whether the input will allow for `NULL` values (empty input). If disabled then an empty input is converted to `0`.

#### Hex Color
----------

### Hex Color
*Supported Datatypes: **`VARCHAR`***

Accepts only 6 hexadecimal characters and provides a live-colored square matching the value. This UI also uses the HTML5 color-chooser for easy color selection. Allowed hexadecimal characters include: `0123456789ABCDEF`
Expand All @@ -69,10 +82,7 @@ Accepts only 6 hexadecimal characters and provides a live-colored square matchin

----------

### Date & Time Inputs
**TODO – All these UIs should be combined into one**

#### Datetime (Date, Time, and Year)
### Datetime (Date, Time, and Year)
*Supported Datatypes: **`DATETIME`**, `DATE`, `TIME`, `YEAR`*
This UI provides a set of drop-downs and numerical inputs for entering months days, years, hours, minutes and seconds based on the datatype. HTML5 helpers are available for easier date/time selection. All values are saved in the ISO 8601 standard: yyyy-mm-dd hh-mm-ss

Expand All @@ -83,9 +93,7 @@ This UI provides a set of drop-downs and numerical inputs for entering months da

----------

### Lists and Other Inputs

#### Select (Drop-down or Radio Buttons)
### Select (Drop-down or Radio Buttons)
*Supported Datatypes: **`VARCHAR`**, `INT`*

Sometimes you don't need to create a dedicated table to house relational dropdown options but you still want to limit the values a user can choose. This UI will save a single non-relational value chosen from a set of JSON options.
Expand All @@ -96,7 +104,9 @@ Sometimes you don't need to create a dedicated table to house relational dropdow
* `allow_null`: Whether the input will allow for `NULL` values (empty input). If disabled then an empty input is converted to `0`
* `placeholder_text`: The text for the first/empty dropdown option

#### Multi-Select (List or Checkboxes)
----------

### Multi-Select (List or Checkboxes)
*Supported Datatypes: **`VARCHAR`**, `TEXT`*

Sometimes you don't need to create a dedicated table to house relational dropdown options but you still want to limit the values a user can choose. This UI will save multiple non-relational values from a set of JSON options. All selections are glued together with a delimiting character.
Expand All @@ -109,19 +119,25 @@ Sometimes you don't need to create a dedicated table to house relational dropdow

For the list view users select multiple items using the control/ctrl key (Windows) or command/cmd key (Mac).

#### Tags
----------

### Tags
*Supported Datatypes: **`TEXT`**, `VARCHAR`, `CHAR`*

A system for entering and saving comma-delimited tags – for relational tags use the `many-to-many` UI instead. Tags are entered into the list upon hitting the comma or enter key and are deleted by clicking the tag in the list. The tags are saved into the database as a CSV string with commas at the beginning and end (",ranger,studio,range,") which lets you perform powerful `LIKE` filters. For example, by using commas you can filter with `%,range,%` to get results that are exact (does not include "ranger") or `%range%` for inclusive (does include "ranger").

* `force_lowercase`: When on, all entered tags are converted to lowercase

#### Checkbox
----------

### Checkbox
*Supported Datatypes: **`TINYINT`***

Checkbox is the default UI for the TINYINT datatype – saving either a `1` (checked) or `0` (unchecked). It also honors the default value of the database, which is the proper way to set the UI's initial state.

#### Slider
----------

### Slider
*Supported Datatypes: **`INT`***

An HTML5 adjustable slider for choosing a number.
Expand All @@ -130,7 +146,9 @@ An HTML5 adjustable slider for choosing a number.
* `maximum`: The maximum numeric value
* `step`: This sets the interval for allowed values

#### Instructions
----------

### Instructions
*Supported Datatypes: **`VARCHAR`**, `TEXT`*

**TODO: Add `ALIAS` datatype support and remove `VARCHAR` and `TEXT`. No need to have an actual column for this.**
Expand All @@ -139,7 +157,9 @@ This is an easy way to include verbose or formatted instructions or other helper

* `instructions`: This WYSIWYG editor allows you to add formatted text, images, or any other content that will help guide CMS users through the details of your content workflow.

#### Map
----------

### Map
*Supported Datatypes: **`VARCHAR`**, `ALIAS`*

This UI provides an visual and interactive way to select a specific location, which is then Geocoded and dynamically fills in any linked address fields.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

Since SQL is a relational database, Directus has several UIs that can help clearly and easily manage relationships between items. An item can have related items from the same table (eg: *Project -> Related Project*) or a different table (eg: *Project -> Category*). An item can also have relationships to a single item (eg: *Shirt -> Size*) in a Many-to-One (or One-to-Many) relationship, or to multiple items (eg *Shirt -> Materials*) through Many-to-Many relationships.

**Many-to-One** (M2O) relationships save the `id` from another item as it's value, creating a dynamic relationship to that item.
#### Many-to-One (M2O)
Many-to-One relationships save the `id` from another item as it's value, creating a dynamic relationship to that item.

**Many-to-Many** (M2M) relationships are quite a bit more complex, but very powerful. There are two things that are important to understand for M2Ms: Junction Tables, and Aliases. Let's use our *Shirt -> Materials* example from before to explore how this works:
#### Many-to-Many (M2M)
Many-to-Many relationships are quite a bit more complex, but very powerful. There are two things that are important to understand for M2Ms: Junction Tables, and Aliases. Let's use our *Shirt -> Materials* example from before to explore how this works:

```
shirt (Table)
Expand All @@ -23,22 +25,26 @@ shirt_materials (Junction Table)
* material_id
```

**Junction Tables**
#### Junction Tables
We can't efficiently store multiple values in a single field, so M2M fields store all their relationships in a separate table called a "junction table" created just for this purpose. Junction tables are very simple – like all Directus tables they have an `id` column, but they also have two more columns for storing the IDs of the two items it's relating. In this case we're linking a shirts with their respective materials – so we have a `shirt_materials` junction table with `shirt_id` and `material_id` columns.

**Aliases**
#### Aliases
Another thing you may have noticed is that the `materials` column says `Alias` and has quotes around it. Since we're not actually storing anything in that column (remember, values are stored in the Junction Table) we don't need to create it in the database. Instead, Directus uses an Alias column (like a ghost column) to represent a column for M2M UIs. Aliases columns don't exist in your database schema, they are added directly into the `directus_columns` table (a good place to look for bulk creation or troubleshooting).

Since relational UIs can get slightly complex, if you can't get one working or run into issues check out our Troubleshooting Relationships section.

#### Single File (M2O)
----------

### Single File (M2O)
*Supported Datatypes: **`INT`***

This is a M2O relational UI that links a single file (and YouTube/Vimeo video embeds) by storing the related item's ID – which is why this UI only works with the INT datatype (also used for IDs). If you have a `books` table you could use this for the `cover_image` column, for a `projects` table this would be the UI used for columns like: `thumbnail_image`, `wireframe_pdf`, and `background_video`. Basically any column that needs to store a single file.

* `allowed_filetypes`: A CSV of file extensions that this UI will accept. For video embeds you can use `vimeo` and `youtube` as the extension.

#### Multiple Files (M2M)
----------

### Multiple Files (M2M)
*Supported Datatypes: **`MANYTOMANY` (an alias datatype)***

This is a M2M relational UI that links multiple files (and YouTube/Vimeo video embeds). If you have a `album` table you could use this to store mp3s within `tracks`, for a `projects` table this would be the UI used for columns like: `hero_slideshow`, `youtube_playlist`, and `press_pdfs`. Basically any column that needs to store multiple files.
Expand All @@ -47,7 +53,9 @@ This is a M2M relational UI that links multiple files (and YouTube/Vimeo video e
* `choose_button`: Toggles a "Choose" button that opens a modal with all existing Directus files to choose from
* `remove_button`: Toggles "Remove" buttons for each file that let's you delete it

#### Many-to-Many (M2M)
----------

### Many-to-Many (M2M)
*Supported Datatypes: **`MANYTOMANY` (an alias datatype)***

This is a M2M relational UI that will make it easy to link the item being edited to multiple other items from another table (or the same table). You can use this to relate multiple `tags` to `projects`, or multiple `staff` to their respective `office`. But be careful about creating a schema/architecture with recursive or deeply nested M2Ms – otherwise you'll end up with a confusing "Matryoshka doll" user experience.
Expand All @@ -64,7 +72,9 @@ This is a M2M relational UI that will make it easy to link the item being edited
* `min_entries`: Sets a minimum number of items that need to be added for this field to validate
* `no_duplicates`: If enabled, items already linked will not show up in the Choose Item listing modal

#### Many-to-One (M2O)
----------

### Many-to-One (M2O)
*Supported Datatypes: **`INT`***

This is a M2O relational UI drop-down that links to a single item by storing the related item's ID in the column – which is why this UI only works with the INT datatype (also used for IDs). You could use this to relate each item in your `press` table to a `project`, or to relate
Expand All @@ -80,7 +90,9 @@ This is a M2O relational UI drop-down that links to a single item by storing the
* Text Input: For larger datasets, this open field let's you filter by typing
* `filter_column`: The column who's value is used for filtering

#### Many-to-One Type-Ahead
----------

### Many-to-One Type-Ahead
*Supported Datatypes: **`INT`***

Similar to the `Many-to-One` in function, the interface for this UI is a type-ahead (live search auto-complete) which is useful for large relational datasets that won't fit into a dropdown.
Expand All @@ -90,7 +102,9 @@ Similar to the `Many-to-One` in function, the interface for this UI is a type-ah
* `template`: Handlebars template for displaying the items
* `include_inactive`: Whether or not to include inactive (`2`) status items

#### One-to-Many (O2M)
----------

### One-to-Many (O2M)
*Supported Datatypes: **`ONETOMANY` (an alias datatype)***

Similar to Many-to-One, this UI is an interface for the opposite direction. Instead of saving the `id` of a related item in an actual column, the One-to-Many is an Alias column that performs actions on related items.
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit 421bbe5

Please sign in to comment.