Drupal 8 – Formatting the Input and Output Form for a Custom Content Type


Sometimes you may find that the visual representation of your new content creation form doesn’t fit with how you would like it to appear. You may want to change the order of fields on the form, the type of widget used to create content in a field, or the format of the widget itself. To change how the form is displayed, edit a content type following the steps you’ve performed previously. Click the “Manage form display” tab at the top of the page, resulting in the list of fields with their widget types and widget configurations displayed.

To rearrange the order of the fields on the form, click and hold the arrows icon next to the field you wish to move, drag the field to the position where you want it to appear, and release your mouse button. To change the widget type, simply select a new value from the widget select list, and to change the appearance of a widget (for example, changing a text area so that it displays more than the default five lines), click the gear icon in the right column.

As an example, let’s change the text area field for driving directions from the default five lines of text to ten lines of text. To do so, click the gear icon in the right column of the “Driving directions” field. The for will expand to display a field where you can change the number of rows as well as enter placeholder text that will appear in the field until the author begins entering text in that field. Change the number of rows from 5 to 10 and then click the Update button, followed by the Save button. The number of rows displayed when creating a new event is ten, providing the author more room to enter directions. Many Drupal developers use such techniques.

There will be times when the visual representation of your new content type as displayed to the end user of a site doesn’t fit with how you would like the content created with your new content type to be rendered on the screen.
In the previous section we looked at rearranging the fields on the form used by content authors to create an event; in this case we are rearranging the content as it appears when an event is rendered to an end user.

Adjusting the order and positioning of the labels in relation to the field can be accomplished by clicking the “Manage display” tab on the custom content type edit form. This page lists all of the fields that are associated with our content type, and provides the ability to define basic display attributes for the label and content for each of the fields. By default there are two sets of values that we can set: one for the Default (full node) and one for the Teaser view. The Default option displays the complete content item and Teaser displays just the content item’s title and a trimmed version of the body field. You can switch between these using the two links at the top left of the page. If you click the select list for the Label of each field , you will find that there are three options:

Above: The label will be displayed on a line immediately above the widget that you selected for your field.
Inline: The label will be displayed to the left of your widget, on the same line as the widget.
Hidden: The label will not be displayed on the screen.


Drupal 8 Fields – Select Lists and File Uploads


Select lists are often called drop-down lists. To demonstrate select lists, let’s create a new field for the Event content type that lists whether the event is a concert, a play, or a lecture. Creating a select list is similar to creating the previous field types covered. On the “Manage fields” page for the Event content type, click the “Add field” button. Select “List (text)” for the field type (refer to Figure 5-17) and enter “Type of Event” in the Label field. After setting these values, click the “Save and continue” button to proceed with the definition of your new select list field.

On the next screen, as in previous examples, enter a key|label pair for each of the options to be listed. Enter concert|Concert, play|Play, and lecture|Lecture in the “Allowed values list,” with one set of key|label values per line. Leave the “Allowed number of values” set to “Limited” and “1.” To proceed, click the “Save field settings” button. On the next configuration screen, click “Save settings” after you have set any values that you wish to change on the form.

In previous examples, we had to click the “Manage form display” tab and change the widget type from “Select list” to “Check boxes/radio buttons.” Since we want to display a select list, there is no need to change the value. You are now ready to use your new select list field.

The file upload field type presents a file browser button that allows an author to browse their local computer for a file to upload to Drupal and attach to the content item that they are creating. Drupal developers use this filed for different files. Creating a file upload field is nearly identical to the procedure for creating other field types. We will expand our Event content type to include the ability to attach the program for the event. As with previous fields, navigate to the Event content type’s “Manage fields” page and click the “Add field” button. On the “Add field” screen, select “File” as the field type and enter “Event Program” in the Label field. Click “Save and continue” to proceed to the next step.

On the “Field settings” page, check the “Enable Display field” check box and the “Files displayed by default” check box. Checking these boxes provides the author with the option of displaying a link to the file when visitors are viewing that content item. By default, the destination for the uploaded file will be the “Public files” directory, which is a configurable destination defined by the site administrator. Next, in the “Allowed number of values” field, set the number of file uploads that will be enabled for content authors.

We will leave the option set to “Limited” and “1” as we only foresee the need to allow a content author to upload a single event program file per event. Depending on your requirements, you may change the number of allowed file uploads. After setting the values on the form, click the “Save field settings” button.