3

Form Designer with highlighted category

In the Sitecore Forms Designer there are four predetermined categories for elements for your form.

  • Basic
  • Lists
  • Security
  • Structure

I've looked everywhere and even added a folder in /sitecore/system/Settings/Forms/Field Types and added my new field types into this folder, but it doesn't work that way, from what I can tell.

How can I create a new category?

Improve this question

1 Answer 1

Reset to default
4

1) You need to keep your category under /sitecore/system/Settings/Forms/Field Types in master database.

2) But you also need to add some more items in core database.

2a) You need to duplicate DraggableBasic and ExpanderBasic items in core database that you can find under /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design/PageSettings.

Name them accordingly Draggable{your_category_name} and Expander{your_category_name}.

Change value in StaticData field in Drabbable item to id of your category created in master database under /sitecore/system/Settings/Forms/Field Types:

enter image description here

so in my case it was like this:

enter image description here

Also change HeaderText field in Expander item according to your desired category name: enter image description here

2b) You need to add these newly created expander and draggable items in the Design tab shared renderings.

Navigate to /sitecore/client/Applications/FormsBuilder/Pages/FormDesigner/PageSettings/InfoTabControl/Design item and turn on showing Raw values. Scroll down to Renderings field (Shared renderings). If you cannot see it, turn on also showing Standard fields:

enter image description here

Copy the value to Notepad or any other editor and format it a bit to be more readable.

Duplicate two entries related to ExpanderBasic and rename them accordingly to your setup. For me it was ExpanderAdvanced ;)

I have duplicated these renderings:

<r uid="{ED3AE365-02C5-4B10-8ECF-E2283DEC668B}" p:after="r[@uid='{6B1B70A9-6236-4447-B4B3-5F6082A61B8B}']" s:id="{1CA7EB02-74E0-42F9-B8C9-32E62FD505BD}" s:par="Id=ExpanderBasic" s:ph="" />

<r uid="{85DEAD48-AC75-4B74-AAFB-079D379E0C1B}" p:after="r[@uid='{F4B0C881-F46E-47BB-B76B-C3219BF16D4A}']" s:id="{E3DDC819-50A5-477A-A3A3-4CDCF3C7B5A4}" s:par="Id=DraggableBasic" s:ph="ExpanderBasic.Body" />

and placed my duplicated renderings right after them and moved id in p:after accordingly:

enter image description here

Copy or replace all rendering elements back to the field according to your changes.

You can you use https://www.guidgenerator.com/online-guid-generator.aspx with Uppcase turned on to generate guids for your newly created renderings or Visual Studio :)

This is result:

enter image description here

Improve this answer
1
  • 2
    Worked like a charm. I used Sitecore Rocks (since it's a SPEAK application) to add the two renderings to the presentation details. But end result is the same.
    – Dylan Young
    Commented Nov 12, 2018 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.