ACF Chained Fields - Create cascading dropdown fields

The Chained Fields custom field gives you the ability to create cascading dropdown fields that dynamically change based on the previous selection and thus giving your users a better user experience.

Create cascading dropdown fields

How to add a Chained Fields Custom Field to Joomla! Articles

The Chained Fields allows you to enter a custom data set or import a CSV file to automatically create the cascading dropdown fields.

acf chained fields field settings

Let's see each field settings.

Name Description
Data Source Select the data source. You can either enter the expected format via text or upload a CSV file.
  • Custom
  • From CSV File
Custom Data Source Enter the data source source manually. Format:

Year,Make,Model
2015,Audi,A3
2016,BMW,X3
2017,FIAT,500

The first row must include the labels for each dropdown. In the above example, we have a sample data related to car models, so the first line contains the Year, Make and Model of cars. Then in each new line, we define the year, make and model for each car.

You can find an example input by clicking here: Sample Data
CSV Data Source Upload a CSV file to import your choices.
CSV Separator Enter the separator used in the CSV file.
Layout Select the layout that will be used to display the field. Either use the default layout or a custom layout that allows you to enter HTML code as well as use some Smart Tags to print the selected dropdown values.
Custom Layout Enter the custom layout.
You can use the following Smart Tags for each dropdown fields to retrieve their values: {field.1.value} where 1 is the first dropdown field which will return its value.
Similarly, you can use the Smart Tag {field.1.label} to retrieve each dropdown label.

Replace 1 with 2 for the second dropdown field, etc...

Usage

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the Chained Fields custom field as you can see in the screenshot below.

acf chained fields field usage

You can now select a value for each dropdown set in your data source. Once you select a value on the first dropdown field, it will automatically fetch the data for the next dropdown.

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.

Default Layout

acf chained fields frontend

Custom Layout

Example custom layout:

You have selected the {field.3.label} {field.3.value}, the {field.2.label} is {field.2.value} and the {field.3.label} is {field.3.value}

acf chained fields custom layout frontend

FAQ

Can I use ACF - Chained Fields with YooTheme Pro Dynamic Content?

The "ACF - Chained Fields" custom field is now compatible with YooTheme Pro Dynamic Content and you can use it to populate YooTheme elements such as the Grid, List, or any elements you desire.

How can I override the layout of "ACF - Chained Fields" custom field?

To override the "ACF - Chained Fields" custom field, read here: How to override the "ACF - Chained Fields" custom field.

Where can I find sample data?

Below you can find sample data that you can use and customize to fit your needs.

You can use the following contents either in the Custom Data Source Textarea or save it as CSV and import it by selecting "From CSV File" under Data Source.

Year,Make,Model
2017,Acura,ILX
2017,Acura,MDX
2017,Acura,NSX
2017,Acura,RDX
2017,Acura,RLX
2017,Acura,TLX
2017,Alfa Romeo,4C
2017,Alfa Romeo,Giulia
2017,Aston Martin,DB11
2017,Aston Martin,Rapide S
2017,Aston Martin,V12 Vantage S
2017,Aston Martin,Vanquish
2017,Audi,A3
2017,Audi,A3 Sportback e-tron
2017,Audi,A4
2017,Audi,A5
2017,Audi,A6
2017,Audi,A7
2017,Audi,A8
2017,Audi,allroad
2017,Audi,Q3
2017,Audi,Q5
2017,Audi,Q7
2017,Audi,R8
2017,Audi,RS
2017,Audi,S3
2017,Audi,S5
2017,Audi,S6
2017,Audi,S7
2017,Audi,S8
2017,Audi,SQ5
2017,Audi,TT
2017,Audi,TTS
2017,Bentley,Bentayga
2017,Bentley,Continental GT
2017,Bentley,Continental GT Speed
2017,Bentley,Continental Supersports
2017,Bentley,Flying Spur
2017,Bentley,Mulsanne
2017,BMW,2 Series
2017,BMW,3 Series
2017,BMW,4 Series
2017,BMW,5 Series
2017,BMW,5 Series Gran Turismo
2017,BMW,6 Series
2017,BMW,7 Series
2017,BMW,ALPINA B6 Gran Coupe
2017,BMW,ALPINA B7
2017,BMW,i3
2017,BMW,i8
2017,BMW,M2
2017,BMW,M3
2017,BMW,M4
2017,BMW,M6
2017,BMW,M6 Gran Coupe
2017,BMW,X1
2017,BMW,X3
2017,BMW,X4
2017,BMW,X5
2017,BMW,X6
2017,Buick,Cascada
2017,Buick,Enclave
2017,Buick,Encore
2017,Buick,Envision
2017,Buick,LaCrosse
2017,Buick,Regal
2017,Buick,Verano
2017,Cadillac,ATS
2017,Cadillac,ATS Coupe
2017,Cadillac,ATS-V
2017,Cadillac,ATS-V Coupe
2017,Cadillac,CT6
2017,Cadillac,CTS
2017,Cadillac,CTS-V
2017,Cadillac,Escalade
2017,Cadillac,Escalade ESV
2017,Cadillac,XT5
2017,Cadillac,XTS
2017,Chevrolet,Bolt
2017,Chevrolet,Camaro
2017,Chevrolet,Colorado
2017,Chevrolet,Corvette
2017,Chevrolet,Cruze
2017,Chevrolet,Equinox
2017,Chevrolet,Express
2017,Chevrolet,Express Cargo
2017,Chevrolet,Express LS 3500
2017,Chevrolet,Express LT 3500
2017,Chevrolet,Impala
2017,Chevrolet,Malibu
2017,Chevrolet,Malibu Hybrid
2017,Chevrolet,Silverado 1500
2017,Chevrolet,Silverado 2500HD
2017,Chevrolet,Silverado 3500HD
2017,Chevrolet,Spark
2017,Chevrolet,SS
2017,Chevrolet,Suburban
2017,Chevrolet,Tahoe
2017,Chevrolet,Traverse
2017,Chevrolet,Trax
2017,Chevrolet,Volt
2017,Chrysler,200
2017,Chrysler,300
2017,Chrysler,Pacifica
2017,Dodge,Challenger
2017,Dodge,Charger
2017,Dodge,Durango
2017,Dodge,Grand Caravan
2017,Dodge,Journey
2017,Dodge,Viper
2017,FIAT,124 Spider
2017,FIAT,500
2017,FIAT,500e
2017,FIAT,500L
2017,FIAT,500X
2017,Ford,C-Max Energi
2017,Ford,C-Max Hybrid
2017,Ford,Edge
2017,Ford,Escape
2017,Ford,Expedition
2017,Ford,Expedition EL
2017,Ford,Explorer
2017,Ford,F-150
2017,Ford,F-250 Super Duty
2017,Ford,F-350
2017,Ford,F-350 Super Duty
2017,Ford,F-450 Super Duty
2017,Ford,Fiesta
2017,Ford,Flex
2017,Ford,Focus
2017,Ford,Fusion
2017,Ford,Fusion Energi
2017,Ford,Fusion Hybrid
2017,Ford,GT
2017,Ford,Shelby GT350
2017,Ford,Taurus
2017,Ford,Transit Connect
2017,Ford,Transit Van
2017,Ford,Transit Wagon
2017,Genesis,G80
2017,Genesis,G90
2017,GMC,Canyon
2017,GMC,Savana Cargo
2017,GMC,Sierra 1500
2017,GMC,Sierra 3500HD
2017,GMC,Terrain
2017,GMC,Yukon
2017,Honda,Accord
2017,Honda,Accord Hybrid
2017,Honda,Civic
2017,Honda,Clarity
2017,Honda,CR-V
2017,Honda,Fit
2017,Honda,HR-V
2017,Honda,Odyssey
2017,Honda,Pilot
2017,Honda,Ridgel
2017,Honda,Ridgeline
2017,Hyundai,Accent
2017,Hyundai,Azera
2017,Hyundai,Elantra
2017,Hyundai,Elantra GT
2017,Hyundai,Ioniq
2017,Hyundai,Santa Fe
2017,Hyundai,Santa Fe Sport
2017,Hyundai,Sonata
2017,Hyundai,Sonata Hybrid
2017,Hyundai,Tucson
2017,Hyundai,Veloster
2017,Infiniti,Q50
2017,Infiniti,Q60 Coupe
2017,Infiniti,Q70
2017,Infiniti,QX30
2017,Infiniti,QX50
2017,Infiniti,QX60
2017,Infiniti,QX70
2017,Infiniti,QX80
2017,Jaguar,F-PACE
2017,Jaguar,F-TYPE
2017,Jaguar,XE
2017,Jaguar,XF
2017,Jaguar,XJ
2017,Jeep,Cherokee
2017,Jeep,Compass
2017,Jeep,Grand Cherokee
2017,Jeep,Patriot
2017,Jeep,Renegade
2017,Jeep,Wrangler
2017,Kia,Cadenza
2017,Kia,Forte
2017,Kia,K900
2017,Kia,Niro
2017,Kia,Optima
2017,Kia,Optima Hybrid
2017,Kia,Rio
2017,Kia,Sedona
2017,Kia,Sorento
2017,Kia,Soul
2017,Kia,Soul EV
2017,Kia,Sportage
2017,Lamborghini,Aventador
2017,Lamborghini,Huracan
2017,Land Rover,Discovery
2017,Land Rover,Discovery Sport
2017,Land Rover,Range Rover
2017,Land Rover,Range Rover Evoque
2017,Land Rover,Range Rover Sport
2017,Lexus,CT 200h
2017,Lexus,ES 300h
2017,Lexus,ES 350
2017,Lexus,GS 200t
2017,Lexus,GS 350
2017,Lexus,GS 450h
2017,Lexus,GS F
2017,Lexus,GX 460
2017,Lexus,IS 200t
2017,Lexus,IS 300
2017,Lexus,IS 350
2017,Lexus,LS 460
2017,Lexus,LX 570
2017,Lexus,NX 200t
2017,Lexus,NX 300h
2017,Lexus,RC 200t
2017,Lexus,RC 300
2017,Lexus,RC 350
2017,Lexus,RC F
2017,Lexus,RX 350
2017,Lexus,RX 450h
2017,Lincoln,Continental
2017,Lincoln,MKC
2017,Lincoln,MKT
2017,Lincoln,MKX
2017,Lincoln,MKZ
2017,Lincoln,Navigator
2017,Lincoln,Navigator L
2017,Lotus,Evora
2017,Maserati,Ghibli
2017,Maserati,Ghibli S Q4
2017,Maserati,GranTurismo
2017,Maserati,Levante
2017,Maserati,Quattroporte
2017,Mazda,3
2017,Mazda,6
2017,Mazda,CX-3
2017,Mazda,CX-9
2017,Mazda,MX-5 Miata
2017,McLaren,570GT
2017,McLaren,570S
2017,Mercedes-Benz,B-Class
2017,Mercedes-Benz,C-Class
2017,Mercedes-Benz,CLA-Class
2017,Mercedes-Benz,CLS-Class
2017,Mercedes-Benz,E-Class
2017,Mercedes-Benz,G-Class
2017,Mercedes-Benz,GLA-Class
2017,Mercedes-Benz,GLC-Class
2017,Mercedes-Benz,GLC-Class Coupe
2017,Mercedes-Benz,GLE-Class
2017,Mercedes-Benz,GLE-Class Coupe
2017,Mercedes-Benz,GLS-Class
2017,Mercedes-Benz,Metris
2017,Mercedes-Benz,S-Class
2017,Mercedes-Benz,S550
2017,Mercedes-Benz,S600
2017,Mercedes-Benz,SL-Class
2017,Mercedes-Benz,SLC-Class
2017,MINI,Clubman
2017,MINI,Convertible
2017,MINI,Countryman
2017,MINI,Hardtop
2017,Mitsubishi,i-MiEV
2017,Mitsubishi,Lancer
2017,Mitsubishi,Mirage
2017,Mitsubishi,Mirage G4
2017,Mitsubishi,Outlander
2017,Mitsubishi,Outlander Sport
2017,Nissan,Altima
2017,Nissan,Armada
2017,Nissan,Frontier
2017,Nissan,GT-R
2017,Nissan,Juke
2017,Nissan,Leaf
2017,Nissan,Maxima
2017,Nissan,Murano
2017,Nissan,NV Cargo
2017,Nissan,NV Passenger
2017,Nissan,NV200
2017,Nissan,Pathfinder
2017,Nissan,Rogue
2017,Nissan,Sentra
2017,Nissan,Titan
2017,Nissan,Titan XD
2017,Nissan,Versa
2017,Nissan,Versa Note
2017,Porsche,718
2017,Porsche,911
2017,Porsche,Cayenne
2017,Porsche,Cayenne S
2017,Porsche,Macan
2017,Porsche,Panamera
2017,Ram,1500
2017,Ram,2500
2017,Ram,3500
2017,Ram,Promaster Cargo Van
2017,Ram,Promaster City
2017,Ram,Promaster Window Van
2017,Rolls-Royce,Dawn
2017,Rolls-Royce,Ghost Series II
2017,Rolls-Royce,Phantom
2017,Rolls-Royce,Wraith
2017,smart,fortwo
2017,Subaru,BRZ
2017,Subaru,Crosstrek
2017,Subaru,Forester
2017,Subaru,Impreza
2017,Subaru,Legacy
2017,Subaru,Outback
2017,Subaru,WRX
2017,Tesla,Model S
2017,Tesla,Model X
2017,Toyota,4Runner
2017,Toyota,86
2017,Toyota,Avalon
2017,Toyota,Avalon Hybrid
2017,Toyota,Camry
2017,Toyota,Camry Hybrid
2017,Toyota,Corolla
2017,Toyota,Corolla iM
2017,Toyota,Highlander
2017,Toyota,Highlander Hybrid
2017,Toyota,Land Cruiser
2017,Toyota,Mirai
2017,Toyota,Prius
2017,Toyota,Prius c
2017,Toyota,Prius Prime
2017,Toyota,RAV4
2017,Toyota,RAV4 Hybrid
2017,Toyota,Sequoia
2017,Toyota,Sienna
2017,Toyota,Tacoma
2017,Toyota,Tundra
2017,Toyota,Yaris
2017,Toyota,Yaris iA
2017,Volkswagen,Beetle
2017,Volkswagen,Beetle Convertible
2017,Volkswagen,CC
2017,Volkswagen,Golf
2017,Volkswagen,Golf GTI
2017,Volkswagen,Golf R
2017,Volkswagen,Golf SportWagen
2017,Volkswagen,Jetta
2017,Volkswagen,Passat
2017,Volkswagen,Tiguan
2017,Volkswagen,Touareg
2017,Volvo,S60
2017,Volvo,S60 Cross Country
2017,Volvo,S90
2017,Volvo,V60
2017,Volvo,V60 Cross Country
2017,Volvo,V90 Cross Country
2017,Volvo,XC60
2017,Volvo,XC90
Last updated on Nov 26th 2024 12:11