Problem in Custom Widget

2025/02/12 8:30 AM

I Want to create a Custom Widget where I can add multiple images with different descriptions and use this widget on multiple pages with different data. how can i create it .

Xperience by kentico - 29.3.0
.Net Version - .NET 8.0

Answers

2025/02/12 2:14 PM

I'm going to make a couple assumptions in the reply.

IF the image descriptions are uniform across the site (IE the same image, even if used in multiple locations, will have the same description) then your Widget can simply have a multiple content item selector, and put your images in custom Content Type that has a description as part of it. The selector should provide the Asset GUIDs, which you can retrieve it and the description and use the /getassetasset to display.

IF the image descriptions are unique on each, then you'll possibly need to either make a new content item that is a description AND a selector for the actual image content asset item, or perhaps create your own JSON Serialized property field that contains an array of the descriptions or something, that is more advanced though.

Widgets by default can be 'placed' anywhere you allow them to be placed. If you mean you want the SAME widget on multiple places (where the widget data is the same, but the page data is different), then you will need to use the [Partial Widget Page]((https://github.com/KenticoDevTrev/PartialWidgetPage) system in order to add a widget to an empty "Widget" Page, then use the partial widget page widget to load that same widget page section in multiple locations.

2025/02/12 3:42 PM
Answer
  1. Create an Image content type (one with a Content item asset field) to model your image. We do not support files outside of an associated content item like you might see in a classic media library. You can't just "upload a file" to a widget.
  2. Create a widget based on a View Component with some widget properties.
  3. Assign the combined content selector to one of those widget properties and configure the selector to only allow selection of the Image content type.
  4. Retrieve the widget properties in the widget's InvokeAsync method and use the content retrieval APIs to retrieve the Image content items identified by the items selected in the widget properties. The widget property values will be the ContentItemGUID values of the selected Image content items.
  5. Create a View Model for the widget and populate it with the Image content items you retrieved.
  6. Render the View Model in the Razor view used by the widget.
  7. Done!

You can see a full example of an image widget in the Kentico Community Portal source code.

To answer this question, you have to login first.