I am creating a composite element with 3 standard elements; Checkboxes, Text Area and Image File.

The Checkboxes and Text Area elements are displayed in my composite element in my webform but the Image File is not. Looking at the Image File element, since I do not have private file system enabled, on adding an Image File I need to tick the radio button to set the Upload destination to public files. This is a required field when added an Image File and it is not ticked by default.

I am thinking I need to set this when creating the composite element but I am unsure how to do so. Do I set this via #options like I set the Checkboxes values?

Is there a way I can see all available options I can set for an element when setting up composite elements?

This is what I have at the moment in my code

public static function getCompositeElements() {
        $elements = [];
        $elements['check'] = [
            '#type' => 'checkboxes',
            '#title' => t('Check'),
            '#options' => ['OK','Attn'],
        ];
        $elements['comment'] = [
            '#type' => 'textarea',
            '#title' => t('comment'),
        ];
        $elements['photo'] = [
            '#type' => 'image_file',
            '#title' => t('Photo'),
        ];
        return $elements;
    }
CommentFileSizeAuthor
#11 zombree_webform.tar_.gz2.63 KBzombree
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

danjordan created an issue. See original summary.

danjordan’s picture

danjordan CreditAttribution: danjordan commented

I enabled private file system to test and the Image File field element still not appearing in composite element.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

You need to the change 'image_file' to 'webform_image_file'.
@see /admin/structure/webform/settings/elements

The database schema for composite elements does not support nested multi-value elements. You can't use checkboxes or #multiple within a composite element.

@danjordan Can you please help document how to create a custom webform element and composite?

This would be a great way for you to contribute back to the Drupal community.

danjordan’s picture

danjordan CreditAttribution: danjordan commented

Hi @jrockowitz

Thanks for the tips.

Plan is to get a composite working with standard elements first (working now with text area and image file) and will then look at adding a custom webform element into the mix.

Most definitely happy to share. I am a front end developer so this stuff is stretching my limits and so will likely need some help through the process.

danjordan’s picture

danjordan CreditAttribution: danjordan commented

The image file element is still not working within a composite element.

I have updated the creation to create type 'webform_image_file'. The image file element is now showing on my form (without the "Upload requirements" helper that appears if I use the Image File element outside the composite) but when I use the form and select an image to upload the element, it pauses for a second and then the placeholder text 'No file chosen' is again shown

$elements['photo'] = [
            '#type' => 'webform_image_file',
            '#title' => t('Photo'),
        ];

No JS errors or anything in Drupal logs.

I have debugged the Image File element object from both inside my composite and directly on the form and there are a number of differences with the 2 objects, such as #upload_location being empty. I have tried setting these directly when I create the element in my composite and I can then see these set when I debug the object again but it does not appear to have any impact.

Any ideas?

Thanks

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

Now that I am looking at the code, 'webform_image_file' element is not supported within a composite. Composites are currently setup to only support basic elements.

danjordan’s picture

danjordan CreditAttribution: danjordan commented

OK. Thanks.

Courtenay’s picture

Courtenay CreditAttribution: Courtenay commented

Any possibility of documenting steps to create your own composite elements? Have tried to find information across a variety of sources but no luck... Would be could if you could share what you did.

Thanks

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Active » Closed (works as designed)

Any documentation should go here

kingfisher64’s picture

kingfisher64 CreditAttribution: kingfisher64 commented

I'd really appreciate some documentation. As trying to get a dev friend to build a custom composite element module from the working example and he's really struggling.

is it the example in modules/webform/modules/webform_example_composite that needs copying? and if so does that go into the webform root dir with other examples or root module list?

Kind regards and many thanks in advance.

zombree’s picture

zombree CreditAttribution: zombree as a volunteer commented
FileSize
zombree_webform.tar_.gz2.63 KB

Hey @kingfisher64,

Here is a link to my personal git repo of my custom webform composites module: https://github.com/zombree/D8-Custom-Webform-Composite
I will also upload a tar of the module here.

It's identical to the one I built for my client, I've justed refactored/renamed to remove all references to my client from there. You should be able to enable this module and then go build a webform and add a "Colleges Attended" and "Employment Info" composite fields to your webform.

It took me a while to figure out how to take the example code posted in https://www.drupal.org/node/2824714 and turn it into a working module of my own, as the identical naming of things made it hard to tell which bits relied on each other. I am not able right now to write up explicit directions, but hopefully you will find my code helpful.

Feel free to reach out if you have questions. I will try to create some documentation if I have time in the next few days.

Cheers,
Bree