Composr Tutorial: Custom fields

Written by Chris Graham (ocProducts)
When building catalogues, custom fields for inbuilt content types, and Custom Profile Fields, you have a unified set of fields to choose from.
This tutorial describes all the different fields and their options.


Text

A note about sorting:
Note that text fields will sort using a text sort algorithm. For example, "10" comes before "3", because 1 is less than 3 and it compares characters left-to-right rather than as actual numbers. To get numeric sort you would need a number field type.

short_trans

Title A brief line of translatable/Comcode text
Storage format (for programmer reference) Up to 255 characters of text (linked through translate table)
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


short_trans_multi

Title Multiple brief lines of translatable/Comcode text
Storage format (for programmer reference) Text separated by linebreaks (no character limit) (linked through translate table)
Special default values None
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)

num_required (the number of required values; default is 0 or 1 depending on if required is set)

cms_type=line|codename|integer|float|email (which Composr styling and validation code to use; default is line)
Back-end UI
Image
Front-end UI
Image


short_text

Title A brief line of text (no Comcode support)
Storage format (for programmer reference) Up to 255 characters of text
Special default values None
Supported field options maxlength (the number of characters to have as a maximum; default is 255)
Back-end UI
Image
Front-end UI
Image


short_text_multi

Title Multiple brief lines of text (no Comcode support)
Storage format (for programmer reference) Text separated by linebreaks (no character limit)
Special default values None
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)

num_required (the number of required values; default is 0 or 1 depending on if required is set)

cms_type=line|codename|integer|float|email (which Composr styling and validation code to use; default is line)
Back-end UI
Image
Front-end UI
Image


long_trans

Title A paragraph(s) of translatable/Comcode text
Storage format (for programmer reference) Text (linked through translate table)
Special default values None
Supported field options wysiwyg=on|off (whether to enable the WYSIWYG editor; default is on)

wordwrap=on|off (whether to word-wrap lines in the editor, as opposed to horizontal scrolling; default is on)

input_size (the number of lines in the text area; default is 9)

maxlength (the number of characters to have as a maximum; default is to have no limit)
Back-end UI
Image
Front-end UI
Image


long_text

Title A paragraph(s) of text (no Comcode support)
Storage format (for programmer reference) Text
Special default values None
Supported field options widget=text|huge (widget type, huge is a full-width input and does not support the input_size option; default is text)

wordwrap=on|off (whether to word-wrap lines in the editor, as opposed to horizontal scrolling; default is on)

input_size (the number of lines in the text area; default is 9)

maxlength (the number of characters to have as a maximum; default is to have no limit)
Back-end UI
Image

Text widget

Text widget
Image

Huge widget

Huge widget
Front-end UI
Image

Textdescription=

Textdescription=
Image

Huge widget

Huge widget


posting_field

Note that you are only allowed one posting_field field per catalogue.

Title A paragraph(s) of Comcode, with attachment support
Storage format (for programmer reference) Text (linked through translate table)
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


codename

Title A codename (short sequence of numbers and letters, no spaces)
Storage format (for programmer reference) Up to 255 characters of text
Special default values RANDOM: 10 random numbers and letters (for catalogues it will be enforced as unique also) [catalogues only]
Supported field options None
Back-end UI When adding there is no UI if 'RANDOM' was used.
Image
Front-end UI
Image


password

Title A password (i.e. masked input)
Storage format (for programmer reference) Up to 255 characters of text
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


email

Title An e-mail address
Storage format (for programmer reference) Up to 255 characters of text (e-mail address, or blank)
Special default values !: Current member's configured e-mail address
Supported field options None
Back-end UI
Image
Front-end UI
Image


Numbers

integer

Title An integer (whole number, e.g. 5)
Storage format (for programmer reference) Integer, or null
Special default values AUTO_INCREMENT: An automatically assigned sequential number [catalogues only]
Supported field options range_search=on|off: search forms will allow a range-based search
Back-end UI
Image
NB: When adding there is no UI if 'AUTO_INCREMENT' was used.
Front-end UI
Image


float

Title A float (decimal number, e.g. 3.2)
Storage format (for programmer reference) Floating point number, or null
Special default values None
Supported field options range_search=on|off: search forms will allow a range-based search

decimal_points=on|off: search forms will allow a range-based search

decimal_points_behaviour=dp|trim|price: show exact number of decimal places, trim any zero decimal places off, show exact number of decimal places unless there are none
Back-end UI
Image
Front-end UI
Image


Choices

list

Title A value chosen from a list
Storage format (for programmer reference) Selected/input text (programmer note: no character limit, so we can support very long list items)
Special default values Options are delimited by "|" (e.g. "This|That|Other"), with the real default value coming first. If you want the real default to be blank, start the list with a blank (it won't allow actual selection unless the list is set as non-required).

You can also do like "a=This|b=That|c=Other" if you need the saved values to be different from the values displayed for selection.

You can input a pathname relative to a .csv file (relative to base directory), if the non-bundled Nested CPF CSV Lists addon is installed.
Supported field options custom_values=on|off (whether to allow a custom typed value; if enabled then inline list widgets will not be available; default is off)

dynamic_choices (whether to feed custom values back in as possible selections for others; default is off)

value_remap=none|country (if set to country then the full country names are shown for ISO country codes in the list options; default is none)

auto_sort=on|off (whether to sort the list options; default is off)

input_size (the number of options shown in the list before scrolling is required, applies only to the 'inline' widget type; default is 9)

widget=radio|inline|dropdown|inline_huge|dropdown_huge (whether to use a radio buttons, an inline list, or a dropdown list; default is dropdown)

csv_heading (the column from the .csv file to use, if the default was set as a .csv file; default is to use the first column)
Back-end UI
Image
Image
Image
Image
Image
Front-end UI
Image
Image
Image
Image
Image


list_multi

Title Multiple values chosen from a list
Storage format (for programmer reference) Selected/input text separated by linebreaks
Special default values Options are delimited by "|" (e.g. "This|That|Other").

The pathname relative to a .csv file (relative to base directory), if the non-bundled Nested CPF CSV Lists addon is installed.
Supported field options auto_sort=off|frontend|backend|both (choose front-end to sort the selected choices, choose back-end to sort the list options, choose both to sort both; default is off)

show_unset_values=on|off (whether to show non-set list options on the front-end with a cross next to them; default is off)

custom_values=off|single|multiple (whether to allow a custom typed value; default is off)

dynamic_choices (whether to feed custom values back in as possible selections for others; default is off)

widget=vertical_checkboxes|horizontal_checkboxes|multilist (what input style to use; default is multilist)

input_size (the number of options shown in the list before scrolling is required, applies only to the 'inline' widget type; default is 5)
Back-end UI
Image
Image
Image
Image
Front-end UI
Image
Image
Image
Image


tick

Title Checkbox ('Yes' or 'No')
Storage format (for programmer reference) Integer (0 or 1)
Special default values None
Supported field options None
Back-end UI
Image
Image

If set as non-required it will actually be a drop-down input with 3 possible values (N/A, No, Yes)

If set as non-required it will actually be a drop-down input with 3 possible values (N/A, No, Yes)
Front-end UI
Image
Image


Uploads/URLs

The fields that take "uploaded" files allow you to select files direct from your computer.

The first image-like field will be injected into screen metadata (i.e. will come up on Facebook shares due to being the Open Graph image for the entry).

upload

Title An uploaded file
Storage format (for programmer reference) Up to 255 characters of text (<url>[::<original_filename>], or blank)
Special default values None
Supported field options filetype_filter (comma-separated list of file extensions; default is not to have a filter)
Back-end UI
Image
Front-end UI
Image


upload_multi

Title Multiple uploaded files
Storage format (for programmer reference) <url>[::<original_filename>] separated by linebreaks
Special default values None
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)

filetype_filter (comma-separated list of file extensions; default is not to have a filter)
Back-end UI
Image
Front-end UI
Image


picture

Title An uploaded picture
Storage format (for programmer reference) Up to 255 characters of text (URL, or blank)
Special default values None
Supported field options width (the width all the media will be shown at; default is to auto-detect for each individual file)

height (the height all the media will be shown at; default is to auto-detect for each individual file)
Back-end UI
Image
Front-end UI
Image


picture_multi

Title Multiple uploaded pictures
Storage format (for programmer reference) URLs separated by linebreaks
Special default values None
Supported field options width (the width all the media will be shown at; default is to auto-detect for each individual file)

height (the height all the media will be shown at; default is to auto-detect for each individual file)
Back-end UI
Image
Front-end UI
Image


video

Title An uploaded video
Storage format (for programmer reference) Up to 255 characters of text (<url>[ <width> <height> <length>], or blank) (if we can we will transcode the video and create a thumbnail)
Special default values None
Supported field options width (the width all the media will be shown at; default is to auto-detect for each individual file)

height (the height all the media will be shown at; default is to auto-detect for each individual file)
Back-end UI
Image
Front-end UI
Image


video_multi

Title Multiple uploaded videos
Storage format (for programmer reference) <url>[ <width> <height> <length>] separated by linebreaks (if we can we will transcode the video and create a thumbnail)
Special default values None
Supported field options width (the width all the media will be shown at; default is to auto-detect for each individual file)

height (the height all the media will be shown at; default is to auto-detect for each individual file)
Back-end UI
Image
Front-end UI
Image
NB: You can see I uploaded a non-web-safe video as the first video. We do support these, but they'll only play on browsers with an appropriate plugin installed (unlike mine).


url

Title An URL
Storage format (for programmer reference) Up to 255 characters of text (URL, or blank); common URL errors will be fixed
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


url_multi

Title Multiple URLs
Storage format (for programmer reference) URLs separated by linebreaks; common URL errors will be fixed
Special default values None
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)
Back-end UI
Image
Front-end UI
Image


page_link

Title A page-link (i.e. in-site link)
Storage format (for programmer reference) Up to 255 characters of text (<page-link>[ <link-title>])
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


theme_image

Title An image from the xxx directory of theme images
Storage format (for programmer reference) Up to 255 characters of text (theme image ID, or blank)
Special default values None
Supported field options width (the width all the media will be shown at; default is to auto-detect for each individual file)

height (the height all the media will be shown at; default is to auto-detect for each individual file)
Back-end UI
Image
Front-end UI
Image


'xxx' may be any theme image directory. There is a version of this field type for each of them.
If you have manually added new theme images and are not seeing field types for them, empty the block cache. The field type list is cached using the block cache for performance reasons.

Magic fields

guid

Title A GUID (Globally-Unique Identifier)
Storage format (for programmer reference) Up to 255 characters of text (though less stored)
Special default values N/A: Default is auto-assigned
Supported field options None
Back-end UI When adding there is no UI. When editing it looks like codename
Front-end UI
Image


References

isbn

Title ISBN code
Storage format (for programmer reference) Up to 255 characters of text
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


reference

Title A reference to a catalogue entry in xxx catalogue
Storage format (for programmer reference) Content ID (to whatever catalogue the reference is for), or blank
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


'xxx' may be any catalogue. There is a version of this field type for each of them.

reference_multi

Title Multiple references to a catalogue entry in xxx catalogue
Storage format (for programmer reference) Content IDs (to whatever catalogue the reference is for) separated by linebreaks
Special default values None
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)
Back-end UI
Image
Front-end UI
Image


'xxx' may be any catalogue. There is a version of this field type for each of them.

content_link

Title A link to an item of 'xxx' content
Storage format (for programmer reference) Content ID, or blank
Special default values None
Supported field options None
Back-end UI
Image
NB: Where we support Composr tree-list inputters (like shown for 'reference') for the content types that use them. This screenshot shows input for a 'poll', which is a flat structure and hence just works via a normal drop-down list.
Front-end UI
Image


'xxx' may be any content type. There is a version of this field type for each of them.

content_link_multi

Title Multiple links to an item of 'xxx' content
Storage format (for programmer reference) Content IDs separated by linebreaks
Special default values None
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)
Back-end UI
Image
NB: Where we support Composr tree-list inputters (like shown for 'reference') for the content types that use them. This screenshot shows input for a 'poll', which is a flat structure and hence just works via a normal drop-down list.
Front-end UI
Image


'xxx' may be any content type. There is a version of this field type for each of them.

member

Title A member ID
Storage format (for programmer reference) Member ID, or null
Special default values !: Current user's username
Supported field options None
Back-end UI
Image
Front-end UI
Image


member_multi

Title Multiple member IDs
Storage format (for programmer reference) Member IDs separated by linebreaks
Special default values !: Current user's username
Supported field options auto_sort=on|off (whether to sort the entered options; default is off)
Back-end UI
Image
Front-end UI
Image


author

Title An author configured on the system
Storage format (for programmer reference) Up to 255 characters of text (author)
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


Other

color

Title A colour
Storage format (for programmer reference) Colour hex code with no "#" (e.g. AAAAAA), or blank
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image
NB: There is no special styling by default: this field exists so as to provide a colour-picker field input for those who will then take the data and use it in a useful way.


date

Title A date/time
Storage format (for programmer reference) yyyy-mm-dd hh:mm, or blank
Special default values None
Supported field options min_year=YYYY

max_year=YYYY (defaults place selection around current year)

range_search=on|off: search forms will allow a range-based search
Back-end UI
Image
Front-end UI
Image


just_date

Title A date
Storage format (for programmer reference) yyyy-mm-dd, or blank (due to fixed alignment, string inequality comparisons work effectively)
Special default values None
Supported field options min_year=YYYY

max_year=YYYY (defaults place selection around current year)

range_search=on|off: search forms will allow a range-based search
Back-end UI
Image
Front-end UI
Image


just_time

Title A time
Storage format (for programmer reference) hh:mm, or blank (due to fixed alignment, string inequality comparisons work effectively)
Special default values None
Supported field options range_search=on|off: search forms will allow a range-based search
Back-end UI
Image
Front-end UI
Image


tel

Title A telephone number
Storage format (for programmer reference) Up to 255 characters of text
Special default values None
Supported field options None
Back-end UI
Image
Front-end UI
Image


Blank fields

In almost all cases a field left as blank will not show in the default templates at all.
'color' is the only exception to this (at the time of writing), as there is no way to actually leave that input field blank.

Styling multiple-selection fields

The fields that support multiple-selection will typically output the different selections sequentially without much styling. It is up to the theme designer to write CSS rules to lay these out in an appropriate way.

Programming (advanced)

Generally the fields system is built on top of the lower level fields API within Composr, which is itself built on standard Composr templates.

Extending the set of fields

Programmers may add new field types by writing new systems/fields hook code files. Programming is beyond the scope of this tutorial, but it is relatively easy for a programmer to see how the existing hooks were coded (all existing fields are hook-based too).

Concepts

Front-end
The regular website
Back-end
The administration, adding, editing, etc

See also


Feedback

Please rate this tutorial:
Item has a rating of 5 (Liked by KingBast)

Have a suggestion? Report an issue on the tracker.

Back to Top