Set properties on child object in a MVC Widget

Nicolas Huguet-Latour asked on December 9, 2019 18:24

Hi!

Do you guys have any idea if it is possible to set a property on a child object of a property class on a MVC widget?

If I take the example of SlideShowWidgetProperties in Kentico 12 training kit, all the images Guids are serialized in an array. What would I need to do to be able to add text with each of these images? Could I make a WidgetProperties object that contains multiple Slide objects containing each an image and a text field? Like this :

public class SlideshowWidgetProperties : IWidgetProperties
    {
        public IEnumerable<Slide> Slides { get; set; } = new List<Slide>();
            
        [EditingComponent(TextInputComponent.IDENTIFIER, Label = "{$Widget.MediaLibraryName$}", Order = 1)]
        public string MediaLibraryName { get; set; }

        [EditingComponent(IntInputComponent.IDENTIFIER, Label = "{$Widget.Slideshow.TransitionDelay$}", Order = 2)]
        public int TransitionDelay { get; set; } = 5000;

        [EditingComponent(IntInputComponent.IDENTIFIER, Label = "{$Widget.Slideshow.TransitionSpeed$}", Order = 3)]
        public int TransitionSpeed { get; set; } = 300;

        [EditingComponent(CheckBoxComponent.IDENTIFIER, Label = "{$Widget.Slideshow.DisplayArrowSigns$}", Order = 4)]
        public bool DisplayArrowSigns { get; set; } = true;

        [EditingComponent(CheckBoxComponent.IDENTIFIER, Label = "{$Widget.Slideshow.EnforceDimensions$}", Order = 5)]
        public bool EnforceDimensions { get; set; }

        [EditingComponent(IntInputComponent.IDENTIFIER, Label = "{$Widget.Slideshow.Width$}", Order = 6)]
        public int Width { get; set; }

        [EditingComponent(IntInputComponent.IDENTIFIER, Label = "{$Widget.Slideshow.Height$}", Order = 7)]
        public int Height { get; set; }
    }

Slide class :

public class Slide
    {
        public Guid ImageId { get; set; }
        
        public string Text { get; set; }
    }

If it's possible, I'm struggling to find how to address the properties when I create an instance of the (for example), text widget.

What should the path of the Text property look like for it to work?

Thanks!

Correct Answer

Trevor Fayas answered on December 9, 2019 20:00

You will need to create a custom Form Component that can give you an interface to edit this.

There may be a better alternative though, if you have a many item relationship that you need the Text with the images, you may be better off either...

  1. Keep it just a list of Guids, and do a lookup of the image Title that is set in the Media Library and pull that as the text
  2. Make a new page type (IMage) that points to the guid or image path, and has a text field, and then relate the Images to the current page. The Relationships Extended module will allow you to create a cleaner UI with ordering to do this, however require some setup. You can also use the default Related Pages UI if you wish and not do ordering.
0 votesVote for this answer Unmark Correct answer

Recent Answers


Nicolas Huguet-Latour answered on December 9, 2019 21:15 (last edited on December 9, 2019 21:16)

Hi Trevor,

Thanks for the answer.

I'm not sure I understand how a form component would help me for that... Can you expand your answer a bit?

As for the other two solutions :

  1. In my specific use case I also need to add other fields than the title. So, no luck with that.
  2. The downside of this solution (correct my if I'm wrong) is that I can only have 1 slideshow per page (since it would create a 1 to many relationship).

At this point, since Kentico doesn't allow me to easily store multiple child objects in the widget properties, I feel like the easiest way to solve it would be to :

First, allow the user to create child nodes under the page that would allow the user to create multiple slideshows. The tree would look like this :

  • Page
    • Slideshow 1
      • Slide
      • Slide
      • Slide
    • Slideshow 2
      • Slide
      • Slide
      • Slide

Second, allow the user to select the root of a slideshow as the source of the slideshow in the page builder (the "Slideshow" items in the tree). I would render the slideshow from the slides that reside under that item.

It breaks the flow of the page edition, but I don't see any easier way to do this. The added bonus would be that I can have multiple types of slides.

Do you think that would work?

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.