[Resolved] Displaying Parent post options in Select2 or Radio buttons in CRED form

[Author]

Posts

[nedG]

I have created 2 CPTs in my site.

CPT #1) ICW Points
( these are intended to be stationary Google map points on an Intracoastal waterway (ICW). Like bridges and locks. There are only 17 of them)

CPT #2) ICW Hazards
(these are hazards that are also Google Map points and can get submitted by visitors in a cred form or added manually by the administrator.

ICW Hazards can be stand-alone posts (for custom Google Map locations) or they can belong to an existing parent ICW Point (which already has an established Google map location)

I have set up a One-to-Many relationship. ICW Point (parent) >> ICW Hazard (child)

I have a cred form that allows a visitor to submit an ICW Hazard. In the form there is some conditional logic that asks the visitor if the ICW Hazard that they are submitting belongs to an existing ICW Point (YES or NO radio button).

If YES is selected then I want the visitor to select the parent ICW Point that this ICW Hazard is going to be a child of.

Currently I have successfully set all of this up and it is working. However I am not pleased with the Select2 field and its appearance.

GUI/UX is important and I am certain that many of these visitors will get confused and not understand the available options for the ICW Points since this may be their first time on the waterway.
When a visitor sees the select2 field it only displays 10 parent ICW Points by default. There are 17 possible ICW Point options and the user will certainly not know the names of the remaining ones that are not automatically displayed.. thus causing confusion and most likely an incorrect submission.

I would like to know if there is another solution that may work for this scenario. Either..
1) Force the Select2 dropdown to show all 17 ICW Points by default instead of just 10
or
2) Use Radio buttons instead of the Select2 dropdown (I tried to do this, but it doesn't seem possible)
or
3) Some other method that would be user friendly to the visitor (generic cred field with a view inserted?)

It is important that these ICW Hazards get assigned to the parent ICW Point when submitted in an easy and user friendly way.

Any help or advice is appreciated. Thanks.

[Christian Cox]

I would like to know if there is another solution that may work for this scenario.
Hello, I'll comment on the options below.

1) Force the Select2 dropdown to show all 17 ICW Points by default instead of just 10
I'm not aware of a public filter available to modify the number of results displayed in the Select2 field, but you may be able to use the use_select2="never" attribute and value pair in the relationship cred_field shortcode to disable the Select2 feature entirely, which would result in all 17 options displayed in a standard HTML select field. Please review the documentation available for this attribute and the indications for its use here:
https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_field

2) Use Radio buttons instead of the Select2 dropdown (I tried to do this, but it doesn't seem possible)
3) Some other method that would be user friendly to the visitor (generic cred field with a view inserted?)
There is no built-in way to render the standard relationship field as a set of radio buttons, but a generic radio button could be used instead of the standard parent relationship field. A generic radio button will accept options generated by a View of the parent post type. You would need to use the Forms API and the post relationships API to capture the User's selected parent item, and assign it to the post relationship programmatically when the Form is submitted. There are several other tickets in the forum that include example code explaining how to set up dynamic options for a generic field, like this one:
https://toolset.com/forums/topic/place-view-inside-generic-field/

Other examples showing how to set a parent post association programmatically using our Forms and Relationships APIs:
https://toolset.com/forums/topic/i-need-to-automatically-set-the-related-post-directly/
https://toolset.com/forums/topic/using-the-toolset_connect_posts-function/

Related API documentation:
https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data
https://toolset.com/documentation/customizing-sites-using-php/post-relationships-api/#toolset_connect_posts

Let me know if you have questions about that.

[nedG]

Hi Christian,

I decided to use the use_select2="never" attribute. I reviewd the https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_field page thoroughly but I must've missed it. Thanks for pointing that out.

One last issue.

The select field is now displaying all values. Great. I have a "sortorder" number custom field set up for each post. I would like to order this select field by the "sortorder" value ASC. It seemed to work fine when the field was a select2 field... but now it doesn't work as a standard select field. Any ideas?

[Christian Cox]

Yes unfortunately that is one of the side effects mentioned in the docs for the use_select2 attribute:
...it breaks the "order", "ordering" and "author" attributes...
For a custom sort order, you could add custom JavaScript to reorder those options programmatically, or implement a generic field with options coming from a View sorted by whatever criteria you choose in the View settings (like a custom field value).

[nedG]

Hi Christian,

OK so it's interesting that you mentioned using a generic field.

I initially tried that and it resulted in no luck. In fact I can't even get the select field to display.

I inserted the generic cred select field and then I created a View to populate the JSON "options" section and I cannot get anything to display.

Here is my code...

In the Cred form I have

[cred_generic_field type='select' field='@icw-point-to-icw-hazard.parent']
{
"required":0,
"options":[[wpv-view name='icw-points-populate-select-menu-in-hazard-form']],
"generic_type":"user_id",
"persist":1
}
[/cred_generic_field]

The View that is inserted above has the following code

<wpv-loop>
          [wpv-item index=1]
			{"value":"[wpv-post-title]","label":"[wpv-post-title]"}
			[wpv-item index=other]
			,{"value":"[wpv-post-title]","label":"[wpv-post-title]"}        
		</wpv-loop>

Nothing displays on the frontend cred form. It's just 'blank'.

I have even inserted the view shortcode on a normal page to look at the output and is all seems correct. Here is what it displays...

{"value":"Norfolk (Mile Marker 0) – Buoy 36","label":"Norfolk (Mile Marker 0) – Buoy 36"} ,{"value":"N. PBL Railroad (Beltline)","label":"N. PBL Railroad (Beltline)"} ,{"value":"North and West Railroad Lift","label":"North and West Railroad Lift"} ,{"value":"Gilmerton Highway Bridge","label":"Gilmerton Highway Bridge"} ,{"value":"Gilmerton Railroad Bridge","label":"Gilmerton Railroad Bridge"} ,{"value":"Highway Bridge","label":"Highway Bridge"} ,{"value":"Dismal Swamp Entrance Marker Fir “30”","label":"Dismal Swamp Entrance Marker Fir “30”"} ,{"value":"Dominion Boulevard Steel Highway Bridge","label":"Dominion Boulevard Steel Highway Bridge"} ,{"value":"Great Bridge Locks","label":"Great Bridge Locks"} ,{"value":"Great Bridge Bridge","label":"Great Bridge Bridge"} ,{"value":"Great Bridge Bridge (Fixed168 By-Pass)","label":"Great Bridge Bridge (Fixed168 By-Pass)"} ,{"value":"N.S. Railroad Bascule","label":"N.S. Railroad Bascule"} ,{"value":"Centerville Turnpike Highway Swing Bridge","label":"Centerville Turnpike Highway Swing Bridge"} ,{"value":"North Landing Swing Bridge","label":"North Landing Swing Bridge"} ,{"value":"Pungo Ferry Bridge","label":"Pungo Ferry Bridge"} ,{"value":"Coinjock Fixed Bridges","label":"Coinjock Fixed Bridges"}

I am sorry but I just don't know what I am doing wrong.

[nedG]

I noticed that the "value" needed to be the ID so I changed the View and now it produces...

{"value":"145","label":"Norfolk (Mile Marker 0) – Buoy 36"} ,{"value":"147","label":"N. PBL Railroad (Beltline)"} ,{"value":"148","label":"North and West Railroad Lift"} ,{"value":"149","label":"Gilmerton Highway Bridge"} ,{"value":"150","label":"Gilmerton Railroad Bridge"} ,{"value":"151","label":"Highway Bridge"} ,{"value":"152","label":"Dismal Swamp Entrance Marker Fir “30”"} ,{"value":"153","label":"Dominion Boulevard Steel Highway Bridge"} ,{"value":"154","label":"Great Bridge Locks"} ,{"value":"155","label":"Great Bridge Bridge"} ,{"value":"156","label":"Great Bridge Bridge (Fixed168 By-Pass)"} ,{"value":"157","label":"N.S. Railroad Bascule"} ,{"value":"158","label":"Centerville Turnpike Highway Swing Bridge"} ,{"value":"159","label":"North Landing Swing Bridge"} ,{"value":"160","label":"Pungo Ferry Bridge"} ,{"value":"161","label":"Coinjock Fixed Bridges"}

But it still doesn't display anything in the generic cred select field

[Christian Cox]

Okay yes the View should include the post ID as the value and the title as the label. Let's troubleshoot the generic field:
1. Try giving the field a slug like "generic-select-1". The @relationship-slug.role syntax is special for relationship fields, and is not applicable to generic fields.
- and -
2. Remove the "generic_type" : "user_id" attribute from the generic field settings:

[cred_generic_field type='select' field='generic-select-1']
{
"required":0,
"options":[[wpv-view name='icw-points-populate-select-menu-in-hazard-form']],
"persist":1
}
[/cred_generic_field]

If the generic select field still does not appear, check that the View option "Disable the wrapping DIV around the View" is turned on in the View editor screen.

[nedG]

Hi Christian,

Thank you for your assistance... and sorry to "string along" this support thread. I have everything working now.

The generic cred field for some reason wasn't working at all, but I saw some other threads about it and I addedsome manual code to the select field along with the View to help populate the options and now it is working...

[cred_generic_field type='select' field='@icw-point-to-icw-hazard.parent' class='icw-point-selector']
{
"required":1,
"validate_format":0,
"persist":1,
"default" : "",
"options":[{"value":"1","label":"------- Select an ICW Location -------"},[wpv-view name="icw-points-populate-select-menu-in-hazard-form"]]
}
[/cred_generic_field]

Not sure why it doesn't work without the value:1 option but I'm ok with doing that and at least it is working as expected.

Thanks for awesome support once again.