[Resolved] Display two fields from same CPT in select2 dropdown value to be searchable

[Author]

Posts

[georgeK-5]

I have a CRED post form to add a CPT A (sea service). In that form there is a post reference field of the CPT B (vessel). I would like the select (which is searchable, see attached image) to display the post_title and the "wpcf-imo". The functionality that is needed is to be able to search-select vessel either with the post_title or the "wpcf-imo", through the same select field.

https://toolset.com/forums/topic/create-custom-field-dropdown-populated-with-values-of-custom-types/

[Waqar]

Hi George,

Thank you for contacting us and I'd be happy to assist.

To achieve this, some code customization will be needed, involving the "wpt_field_options" filter.
( https://toolset.com/documentation/programmer-reference/types-api-filters/#wpt_field_options )

I'll need to perform some tests on my website with similar fields to confirm this and I'll update you, as soon as this testing completes.

Thank you for your patience.

regards,
Waqar

[Waqar]

Hi George,

Thank you for waiting.

I was able to make this work using the following steps:

1. I added a post reference type field "Post Book" (slug "post-book") with the "Posts" post type and set it to select the post from the "Books" post type.

I also added a single line type custom field "Book Line" (slug "book-line") with the "Books" post type.

2. First, I registered a custom shortcode that generates the list of options for a generic field, from all the published "Books" post type. The label of these options would include both, the book post titles and the "Book Line" custom field value:

add_shortcode('get_custom_prf_options', 'get_custom_prf_options_fn');
function get_custom_prf_options_fn() {

	$args = array(
				'post_type'        => 'book',
				'posts_per_page'   => -1,
				'post_status'      => 'publish',
				);

	$posts_array = get_posts( $args );

	$output = '';

	foreach ($posts_array as $post) {
		$post_field_value = types_render_field( "book-line", array( "item" => $post->ID ) );

		if(!empty($post_field_value)) {
			$output .= '{"value": "'.$post->ID.'", "label": "'.$post->post_title.' - '.$post_field_value.'"},';
		}
		else
		{
			$output .= '{"value": "'.$post->ID.'", "label": "'.$post->post_title.'"},';
		}
	}

	return rtrim($output, ',');

}

Note: Please replace post type and custom field slugs in this code snippet, as per your website.

2. Next, I add a new post form to add "Posts" and in it included a select type generic field, instead of the post reference field "Post Book".

This generic field was set with slug "gen-select-field" with the options coming from the newly registered custom shortcode [get_custom_prf_options].
( as shown in the attached "screenshot-1")

3. In the form's "JS editor", I included some custom script to make this generic field, use select2 dropdown:

jQuery(document).ready(function() {
    jQuery('select[name="gen-select-field"]').toolset_select2();
});

As a result, this generic field will show the dynamic list of options coming from the books post type.

4. The last step would be to process this selected book post's ID and save it in the post reference field "Post Book", in the newly created post, when the form is submitted:

add_action('cred_save_data', 'custom_save_data_action',10,2);
function custom_save_data_action($post_id, $form_data)
{
	// if a specific form
	if ($form_data['id']==1234)
	{
		$post_from_gen_field = $_POST['gen-select-field'];
		if(!empty($post_from_gen_field)) {
			toolset_connect_posts( 'post-book', $post_from_gen_field, $post_id );
		}	
	}
}

Note: You'll replace 1234, with the actual ID of your post form. You can learn more about the "cred_save_data" hook and the "toolset_connect_posts" function, from these links:

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

I hope this helps and please let me know if any step/point is not clear.

Important: the custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[georgeK-5]

Hi Wagar,

I have implemented your solution in a staging site and in local site but the form seems to be extremely slow. The previous select field which is stated below did not had that issue.

[cred_field field='sea-service-vessel' force_type='field' class='form-control' output='bootstrap' select_text='--- Enter Vessel Name ---']

Below are the credentials to the staging site in order to see for yourself.

Credentials
{removed}

The link to test the Add post form is
hidden link

All custom code have been implemented in Custom code snippet "vsl-custom-search-filter" at Toolset Settings.

[georgeK-5]

Hi, any update on the above?

[Waqar]

Hi George,

Thanks for the update and I apologize for the delay in getting back on this.

When I checked the "Add Sea Service" page, it wasn't showing any form on it, but I did notice that your website has a large number of "Vessels" posts (32107).

When these many posts are involved, it is expected that this field with programmatically created options will perform slower than the default select field.
( as the custom shortcode queries all the "Vessels" posts at once )

Unfortunately, the only other alternative that I can think of would involve AJAX call to dynamically call the "Vessels" posts, based on the typed text in the select2 field, however, this customization is too complex to be covered over the support forum:
hidden link

If you'd need a professional to assist you with such an implementation, you can consult someone from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar