Problem with creating custom properties.

Paul Gruffydd

Vote:

The basics of creating a dropdown are here:

http://world.episerver.com/documentation/developer-guides/CMS/Content/Properties/built-in-property-types/Single-or-multiple-list-options/

In summary, you need to create a class which implements ISelectionFactory. To implement that interface, you need a method called GetSelections which returns an IEnumarable of ISelectItem. Within that method, it's up to you how you create that list. The example above uses hard-coded strings but you'd probably want to pull it from a datasource of some kind (e.g. a property on the homepage).

Once you've got your SelectionFactory created, you just need to annotate the property you want to appear as a dropdown with a [SelectOne] attribute, for example:

[SelectOne(SelectionFactoryType=typeof(MySelectionFactory))]

And that's it!

#180491

Jul 12, 2017 15:14

Bhargav Parasar

Vote:

Hi Paul, Thank you. That helped me to understand well :)

#180499

Jul 12, 2017 16:32

Bhargav Parasar

Vote:

I have created my custom dropdown property as My_Prop and i have annotated the property with the [Select Many] Attribute.

My property looks like this :

[SelectMany(SelectionFactoryType = typeof(My_Prop))]
public virtual string dropdown { get; set; }

Can you please tell me how to render this property in the view? I tried @Html.PropertyFor(x=>x.dropdown), but this is not helpful as i'm not getting the list in the web page.

#180505

Jul 13, 2017 6:10

Vote:

Hi Bhargav,

When adding a SelectMany to a string property you will get your selected values as a comma separated string. You will need to split the values by comma yourself.

I would suggest that you create display templates for your property according to Joel's blog http://joelabrahamsson.com/episerver-7-and-mvc-how-to-customize-rendering-of-properties/ or Dejan's reply to this post.

@Html.DisplayFor(x => x.CurrentPage.dropdown, "CommaSeparatedString")

And in the view do something like

@model string
@if (Model != null)
{
    foreach (var item in Model.split( new [] { ',' }, StringSplitOptions.RemoveEmptyEntries))
    {
        // output your item
    }
}

This code is just quickly thrown together so you might need to do some adjustments.

#180506

Jul 13, 2017 7:52

Bhargav Parasar

Vote:

Hi Alf, My custom property class looks like this :

namespace Enterprise.Models.Properties
{
public class My_Prop : ISelectionFactory
{
public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
{

var MyDrop = new ISelectItem[]
{
new SelectItem() { Text = "Car", Value = "Car" },
new SelectItem() { Text = "Home", Value = "Home" },

new SelectItem() { Text = "MotorBike", Value = "MotorBike"}

};

return MyDrop;
}
}
}

and i've Annotated the property in the my page as below :

[UIHint(UIHint.LongString)]
[SelectMany(SelectionFactoryType = typeof(My_Prop))]
public virtual string dropdown { get; set; }

I've created the display template which will ovveride the actual LongString property, which goes like this :

LongString.cshtml (path : ~/Views/Shared/DisplayTemplates) - in the solution

@model string

@if (Model != null)
{
<select>
@foreach (var item in Model.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
{
<option> @item </option>
}
</select>

}

And the view in which i want my property to be displayed as dropdown, is :

@model Enterprise.Models.Pages.StartPage
@using Enterprise.Models.Properties
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/Layouts/_Root.cshtml";
}
<html>
<body>
<div class="container">
@Html.PropertyFor(x => x.maincontent)
</div>
<div>
@Html.DisplayFor(x=>x.dropdown,"LongString")
</div>
</body>
</html>

Still i couldn't get the list in my web page. Did i do something wrong?

#180513

Jul 13, 2017 11:00

Vote:

I think it's better if you're using something else than Episerver's built in UIHints. Come up with something new that you use in the UIHint attribute as well as the filename of your .cshtml

I don't think you need the UIHint attribute since you give the Tag in the view

@Html.DisplayFor(x=>x.dropdown,"LongString")

So in my case

[SelectMany(SelectionFactoryType = typeof(My_Prop))]
public virtual string dropdown { get; set; }

and I have created \Views\Shared\DisplayTemplates\CommaSeparatedString.cshtml

@model string

@if (Model != null)
{
	<select>
		@foreach (var item in Model.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
		{
			<option> @item </option>
		}
	</select>
}

and in the Index.cshtml

@Html.DisplayFor(x => x.dropdown, "CommaSeparatedString")

The name "CommaSeparatedString" is just something I came up with. Feel free to use another name as long as it's not a predefined value in Episerver, such as the ones on the UIHint class

#180515

Edited, Jul 13, 2017 11:35

Bhargav Parasar

Vote:

I tried changing the name of display template still nothing is being rendered.

@model string

@if (Model != null)
{
	<select>
		@foreach (var item in Model.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
		{
			<option> @item </option>
		}
	</select>

}

The above piece of code is for rendering this list that i've created here right?

public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
{

var MyDrop = new ISelectItem[]
{
new SelectItem() { Text = "Car", Value = "Car" },
new SelectItem() { Text = "Home", Value = "Home" },

new SelectItem() { Text = "MotorBike", Value = "MotorBike"}

};

return MyDrop;
}
}

Or do i have to make any adjustments?

#180516

Jul 13, 2017 11:49

Vote:

Hi.

To start with I see that we mixed up an attribute. Use SelectOne instead of SelectMany.

SelectMany gives you a checkbox list and that is where Comma Separated String comes in. You can throw the DisplayTemplate away. Sorry about that

The SelectionFactory and SelectItem part is only for creating the drop down for the editor.

Also since you use DisplayFor instead of PropertyFor, you won't see the editor part in the One Page Edit mode. You need to switch to "All Properties" to be able to edit the field, and see the drop down.

#180517

Jul 13, 2017 12:16

Bhargav Parasar

Vote:

Thank you Alf.

Now I've used PropertyFor instead of DisplayFor and in "All properties" i can see the dropdown that i've created but why can't I see it in the web page?

#180519

Jul 13, 2017 12:29

Vote:

Did you remove the Display Template part?

can you see it on the web page if you select a value in the drop down?

#180521

Jul 13, 2017 12:32

Bhargav Parasar

Vote:

Yes I've given @Html.PropertyFor(x=>x.dropdown). And i selected a value and i can see only one value in the web page.

#180522

Jul 13, 2017 12:34

Vote:

And I guess that is the value you selected?

When you are inside episerver, but not in All Properties you should see a blue bon around the place where your view renders the property.

if you have selected a value, the blue box is around the value.

Clicking inside the blue box should open so that you can see the drop down.

#180523

Jul 13, 2017 12:37

Bhargav Parasar

Vote:

Yes its the value that i've selected, but on clicking in that blue box, its letting me to change the selected value there itself instead of displaying the dropdown as you said.

#180524

Jul 13, 2017 12:42

Paul Gruffydd

Vote:

I think this thread may help you with getting the editor to appear correctly:

https://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=145743

#180526

Jul 13, 2017 13:09

Bhargav Parasar

Vote:

In which part of the solution should i create the EditorDescriptor class?

#180527

Jul 13, 2017 13:19

Bhargav Parasar

Vote:

Thank you Alf and Paul. I've got the dropdown in my web page thanks to both of you. I just have one more doubt. Can i add more values to the dropdown while i'm in edit mode.

#180528

Jul 13, 2017 13:49

Vote:

In that case your SelectionFactory must get the options from another area, for example the StartPage since it's easy to find. Or Create some kind of settings page/block.

#180529

Jul 13, 2017 14:04

Bhargav Parasar

Vote:

Sorry I dint understand .Could you please elaborate ?

#180530

Jul 13, 2017 14:14

Vote:

You have your SelectioNFactory that is currently returning hard coded options.

A simple way to be to change your SelectionFactory to read the values from another content.

For example add a property to your startpage. Fetch the StartPage and read that property, split it with a good limiter and for each string after the split you select a new SelectItem.

#180531

Jul 13, 2017 14:19

Vote:

Thinking of it, there's an OLD function in Episerver that I don't think many use nowadays.

Can you try to add "DropDownList" as UIHint on your property?

Go to your page type in admin mode.

Click on the property that should have this dropdown list

Click the radio button "Use custom settings" and start to add your options.

#180532

Jul 13, 2017 14:23

Bhargav Parasar

Vote:

Okay I understood. I have to change the selectionfactory to get values from other property in the page, then i can add them to the SelectItem. That's it right?

#180533

Jul 13, 2017 14:25

Bhargav Parasar

Vote:

Yeah, i added the DropDownList as UIHint for my property.But it is showing that this class doesn't have any custom settings.

#180534

Jul 13, 2017 14:34

Vote:

Could you try adding the attribute [BackingType(PropertyDropDownList)] to the property?

#180535

Edited, Jul 13, 2017 14:40

Bhargav Parasar

Vote:

No, I coudn't. It is showing an error that PropertyDropDownList is invalid in the context. I even added the namespace Episerver.SpecializedProperties.

#180536

Jul 13, 2017 14:48

Vote:

Where do you get this errors?

Here's an example of where we're using that property

[UIHint("DropDownList")]
[BackingType(typeof(EPiServer.SpecializedProperties.PropertyDropDownList))]
[Display(
    Name = "Tab color",
    Description = "Color for the tab and rest of the content",
    GroupName = SystemTabNames.Content,
    Order = 200)]
public virtual string TabColor { get; set; }

#180537

Jul 13, 2017 14:50

Bhargav Parasar

Vote:

Yeah.i added the options.Thank you. But now it is only displaying one value, i mean its not like a dropdown list but it is displayed like a string.

#180538

Jul 13, 2017 14:55

Vote:

Ok, sometimes changing BackingField for an existing property requires more work. Can you try renaming the property? = tells Episerver to create a new Property.

#180540

Jul 13, 2017 15:48

Bhargav Parasar

Vote:

I renamed it to myprop. you want me to create a new property of same type?

#180553

Jul 14, 2017 5:43

Vote:

I was thinking of only renaming the property on the page (confusing that we have the .net class property as well as the episerver "property" = field on content).

Just adding a 2 on it will work for the test.

public virtual string MyProperty2 {get;set;}

#180570

Jul 14, 2017 8:52

Bhargav Parasar

Vote:

Okay, anyways i renamed it. What shoudl i do now?

#180571

Jul 14, 2017 9:12

Vote:

Rebuild, go to episerver edit mode and check if the property now is a dropdown field.

#180572

Jul 14, 2017 9:35

Bhargav Parasar

Vote:

No still its not being displayed as a dropdown :(

#180575

Jul 14, 2017 9:56

Vote:

Not even in All Properties mode?

In that case I guess it's easier to continue letting the SelectionFactory fetching the options from another content.

#180576

Jul 14, 2017 9:57

Bhargav Parasar

Vote:

I can see it as dropdown in All properties mode, but on the page its being displayed like a string.

#180577

Jul 14, 2017 10:02

Vote:

Ok, this works completely fine for me when I'm trying in the Alloy Templates

In the Page Type

[UIHint("DropDownList")]
[BackingType(typeof(EPiServer.SpecializedProperties.PropertyDropDownList))]
public virtual string Dropdown { get; set; }

In the view

@Html.PropertyFor(x => x.CurrentPage.Dropdown)

Note that if you're using your PageType as Model, you don't need x.CurrentPage, it would be enough to do x.Dropdown

Go to admin mode
select the tab ContentType
Find the Page Type where this property is added
There is a row in the table
Name: DropDown
Type: Drop-down list
And some other fields that I don't think are relevant right now
Click on that row to open that property
Click on the tab Custom Settings
Below "Drop-down list options", click the radio button "Use custom settings"
Add your options under "Settings", don't forget to press the button "Add" for each option
Click on save

Now the property should be ready to be used

Go to edit mode
Find or create a page of your page type
Go to All Properties mode
Find your property
It should be a dropdown with your options
Go back to On-Page Editing
Scroll to where you added the .PropertyFor() for the DropDown
You should see a blue box
Click on the blue box and a small box with a dropdown should come up
The dropdown should contain your options

Just one thing for me is that I'm not able to get the options in the dropdown (bug maybe?) but at least I can get the dropdowns.

Need to look a bit more if something is broken or if I am doing something wrong.

#180582

Jul 14, 2017 13:17

Bhargav Parasar

Vote:

Yeah even i can't get options in the dropdown.Anyways thank you so much Alf for taking your time. :)

#180583

Jul 14, 2017 13:20

Bhargav Parasar

Vote:

#180584

Jul 14, 2017 13:22

Bhargav Parasar

Vote:

http://epideveloper.blogspot.com/2013/10/episerver-7-attribute-for-rendering-drop-down-list.html

Hey Alf, see if this might help us. In the above link he created a custom attribute to render the dropdown list with options.

#180585

Jul 14, 2017 13:47

Vote:

That's another way to manage a SelectionFactory that we already talked about. But you still need to change code and deploy to edit which options to display.

#180586

Jul 14, 2017 13:49

Bhargav Parasar

Vote:

okay.but even if i were to such thing, what if i still can't get ito be displayed as a dropdown.

#180587

Jul 14, 2017 14:31