ImageUrl attribute doesn't work for Form Elements

Vote:
 

Hi,

I set  [ImageUrl("~/static/img/thumbnails/CustomTextArea.png")] to my Custom Form Element.

But this attribute doesn't work.

As I can see Episerver always tries to get thumbails path for form elements using following url

/EPiServer/EPiServer.Forms/1.1.4.9000/ClientResources/epi-forms/themes/sleek/images/contenttypes/CustomTextArea.png

Is it a bug?

#146977
Apr 01, 2016 11:18
Vote:
 

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.

#147282
Apr 08, 2016 21:49
Vote:
 

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

#171245
Nov 03, 2016 16:00
Vote:
 

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. 

#171263
Nov 04, 2016 8:13
Vote:
 

The use of ImageUrl attribute is supported in FORM 4.4.2.

#176184
Mar 13, 2017 10:37
Vote:
 

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

#187729
Feb 01, 2018 14:36
Vote:
 

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!

#187755
Feb 02, 2018 2:29
Vote:
 

Hi!

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

/Kai

#197918
Oct 17, 2018 10:01
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.