I am having the same issue.  I don't want to check images into my code repository from a path that is version specific like /EPiServer/EPiServer.Forms/1.1.4.9000/ClientResources/epi-forms/themes/sleek/images/contenttypes

Sounds like a bug to me.

Hi,

Wondering if anyone has found a solution to this? I have tried using the [ImageUrl] attribute and pointing to an existing image for a built in element and it still looks for an image with the name of my custom element. Seems like it should be eaiser than it is to add an image to a custom form element. Any help would be appreciated!

Thanks!

John

Hi all.

For form elements, we do not use ImageUrl to display the image of its. There are 3 steps to do this as described below. A note here is that I used the code structure of Forms.Samples which was open-sourced on GitHub: https://github.com/episerver/EPiServer.Forms.Samples/blob/master/InitializationModule.cs and I use DateTimeElementBlock as an example for a custom form element

1. Within FormsSamplesModuleViewModel (or your custom viewmode), you need to include the type of your custom elements as one of values returned for RegisteredElementContentTypes. 

public IEnumerable<Type> RegisteredElementContentTypes
{
get
{
return new Type[]
{
typeof(DateTimeElementBlock),
typeof(RecaptchaElementBlock)
};
}
}

You can see that DateTimeElementBlock is included as one of registered types.

2. Create a descriptor for your custom form element folloing the sample below

[UIDescriptorRegistration]
public class DateTimeElementBlockDescriptor : FormElementBlockDescriptor<DateTimeElementBlock> { }

Your name of descriptor class should follow our convention "name of custom element" + "Descriptor"

3. Within ClientResources/epi-formssamples/themes/sleek/images/contenttypes, you should include the image describing your custom element. In this case, the name of image should be the same as the name of your custom element (except for the file name extension). In this case, my image name is DateTimeElementBlock.png.

Note: you should replace "epi-formssamples" by the name of your folder in your project. 

Try it and let me know. 

The use of ImageUrl attribute is supported in FORM 4.4.2.

Is there a way to mark that a custom form element should use the thumbnail from a standard form element?

Hi! If you want to use thumbnail of a standard form element, then you have some options:

1. Use ImageUrl attribute and specify exactly the path of the image thumbnail you want to use

[ImageUrl("~/EPiServer/EPiServer.Forms.UI/4.8.1//ClientResources/epi-forms/themes/sleek/images/contenttypes/textboxelementblock.png")]
[ContentType(GUID = "{05E0BBF1-18CA-4D2C-B20D-9756BFBA681B}", GroupName = ConstantsFormsUI.FormElementGroup, Order = 2200)]
public class MyCustomFormElementBlock: InputElementBlockBase
    {

    }

Drawback of this way is you have to change the version string each time you upgrade the FORM.

2. Write a custom attribute

public class StandardFormElementImageAttribute : ImageUrlAttribute
    {
        private static Version formVersion = Assembly.GetAssembly(typeof(EPiServer.Forms.FormsModule)).GetName().Version;
        private static string formatterFormVersion = $"{formVersion.Major}.{formVersion.Minor}.{formVersion.Build}";
        public StandardFormElementImageAttribute(string path): base($"~/EPiServer/EPiServer.Forms.UI/{formatterFormVersion}//ClientResources/epi-forms/themes/sleek/images/contenttypes/{path}")
        {
           
        }
    }

and then use this custom attribute:

[StandardFormElementImage("textboxelementblock.png")]
    [ContentType(GUID = "{05E0BBF1-18CA-4D2C-B20D-9756BFBA681B}", GroupName = ConstantsFormsUI.FormElementGroup, Order = 2200)]
    [AvailableValidatorTypes(Include = new[] { typeof(RequiredValidator) })]
    public class MyCustomFormElementBlock: InputElementBlockBase
    {

    }

This way you will never have to care about the version. And all you need is to supply name of the element you want to use its thumbnail.

Regards!

Hi!

What if we want to change the thumbnails for standard form elements? 

/Kai