Introduction: Build a “RoloDex” App With Views Fields.
In this Tutorial, we will build a simple field-driven search application using Drupal 8 and a Custom Content type. Cards will be used to store information about people, companies, & other organizations with addresses, phone numbers, photos, etc.
This Tutorial requires Views. Drupal 8 site developers can build custom page displays of card information with options for faceted search based on Fields for CRM purposes.
Step One: Create the Custom Content Type: “Card”.
For our “RoloDex” App we are first going to create a custom Content Type named “Card” and then add fields for an image, address, phone number, email, & website. We will also add a main taxonomy to the Card to filter between people, businesses, & other organizations.
Installation: Navigate to /admin/structure/types/add & create a new Content Type for Cards.
Description Text: “This card can be used to reference contact information for people, businesses, or other organizations.”
Settings: Don’t Promote to the Front Page, Don’t Create a New Revision, & Don’t Display Author & Published Information in the configuration check-boxes.
Next: Save the Content Type & add a set of Taxonomy terms to the nodes.
Step Two: Add Taxonomy Categories to the Card Fields.
First: Navigate to /admin/structure/taxonomy/add and add a new Taxonomy group for Cards.
Settings: Within the “Card Terms” vocabulary, we want to create values for:
- People
- Businesses
- Other Organizations
Settings: Save each of the terms for use with Views in filtering the Card content into lists.
Next: Return to the Content Type settings for Cards at /admin/structure/types/manage/card/fields & add the Taxonomy filter.
Settings: Create a Taxonomy Term Field and Label it “CardType”.
Configuration: Limit the values to one term per node & set the field to the “Card Terms”Taxonomy vocabulary.
Next: Navigate to /admin/structure/types/manage/card/form-display and “Select List” for Card Terms.
This adds the ability to sort new Card posts by Taxonomy term on the content creation page:
Complete: In the next steps, we will use these Taxonomy Terms on Card Nodes to filter dynamic content into lists using Views & implement Field Search capabilities.
Next: Let’s Add more information Fields to the Cards.
Step Three: Add User/Company Information Fields to Cards.
In Step Three, we will add more user information Fields to the Card content type that can be used in display lists using Views and also made available to search.
Installation:
- Navigate to the Manage Fields page for Cards (/admin/structure/types/manage/card/fields)
- Add new Fields for: Image, Address, Phone Number, Email, & Website to the Card form.
- Remember to set new Thumbnail sizes for the Image at 220×220 px.
Image Settings: For the Image Field, we created a Reference Field with limit of 1 value set to Image and added it to the form. Then we navigated to /admin/config/media/image-styles to confirm the Image Thumbnail sizes.
Address Fields: Go to Modules & enable the Telephone field module if it is not already enabled. Then, using a Field with a Text: Plain reference type, create fields for:
- Address – Line 1
- Address – Line 2
- City
- State
- Zip Code
- Country
Additional Fields:
- Email (Email Field)
- Phone (Telephone Field)
- Website (Link Field)
The phone, email, & website Fields can all have link or phone/email specific reference values for browser processing. Arrange the order of the Fields on the Card node create page.
Next: Navigate to the Card node create page & see your fields on the form.
Step Four: Create New Content Using the Cards & Fields.
Start: Navigating to the /node/add/card page, you can see all of the Fields created for the Image, Taxonomy, & Address Information listed on the form in display order:
Tip: Use this form to build your Rolodex content. Add business card information for customers & online contacts, or use as a database search tool for specialist development companies.
Settings: In the Manage Field Display section, change the display values to Inline for all of the text fields and set the image file to display with the 220px Thumbnail on node pages with the 220px Thumbnail on teaser views with a hidden label value.
Drupal 8 Results Pages – Card Content:
Hint: Use custom CSS in a Drupal 8 Sub-Theme to change the default display values.
Next: Sort completed Cards into display lists with Exposed Search using Views.
Step Five: Build Views for Card Display & Search.
To complete the project, we need to create search pages for the Taxonomy terms in Views and assign a URL address to them. We will expose the Views Search functions so that the Field terms such as address, city, state, country, etc. become filters for the content.
In this example, we removed the Street Address display for a more compact table view:
Installation: Navigate to create a new view at: /admin/structure/views
- Set the View to filter content of type Cards with Latest Posts Descending.
- Set the Title to “Test Site – Search Database” with a URL of /card-search
- Save & Edit the View. Then add the Fields to the display in a Table format.
View Configuration: Drupal admins have the choice of displaying site Teasers or creating a custom display with the Fields using Tables & HTML Lists.
Exposed Search Settings: Create custom Views for each Taxonomy term & set the URLS to: /people, /businesses, & /organizations. You can then use these pages as site navigation elements with Exposed Search on the Field values.
Optional – Install the Facets Module: In order to build more advanced Faceted Search functionality into a Drupal 8 over what exposed Filters in Views offers by default, install the Facets module along with optional Range Widgets & REST Facets.
Tip: For better configuration on Address fields, install the Address module.
Conclusion: Indexed Card Search with Database Fields.
This tutorial allows Drupal 8 users to take advantage of the potential of using Fields on a custom Content Type with Views filters & Exposed Search. Site builders can use this tutorial to build a Rolodex app for a database that searches people, businesses, & other organizations.
Check out these top 3 Drupal hosting services:
- You can discover new info about Best website hosting by clicking this link.
