Custom Web Part: Displaying Field from Properties in new layout

Michael D asked on October 22, 2019 21:50

The goal is to create an Image Comparison Slider widget. I have created a custom Web Part with 3 new fields in the Properties tab: id, img1_path, img2_path (all visible in widget). I created the widget and pointed it to the web part.

I can add static text to the Web Part Layout tab and it will appear on the page with the new widget so it's all linked correctly.

What do I need to write in the Web Part Layout tab to display the ID field from the widget?

I need this: Image Text

To link to this field

Thanks!

custom web part layout web parts properties

Correct Answer

Michael D answered on October 24, 2019 17:08

Unfortunately it is not possible (even with the latest version) to create custom widgets/web parts only within administration interface. And I don't have access to Visual Studio.

Here is how I achieved a widget slider:

I created a Slider page type. I creaed fields for ID, img1 and img2.
I made a transformation with the code for the slider using those values.
I created a widget using the Universal Viewer web part. I gave a default value for transformation to my new one, and made the path visible on the form.

So staff can first create a new item from the content tree (the new page type). Then add the widget to a page that points to that new page.

This allows other staff to add a slider to a page without going into the code.

0 votesVote for this answer Unmark Correct answer

Recent Answers

David te Kloese answered on October 23, 2019 11:17

If you created an empty Web Part you need to update the code!

Check out these docs: docs.kentico.com/.../creating-new-web-parts

The code needed to retrieve from the Web Part property (or if it's a Widget from the Widget):

GetValue("PropertyName")

Since Widgets point to a Web Part they are basically the same, and the difference is mainly in how they are used in the Admin interface.

There are also a lot of out-of-the-box Widgets and Web Parts available. The code for them is available in your solution (CMSWebParts folder) so check them out if you want to understand how they work.

0 votesVote for this answer Mark as a Correct answer

Michael D answered on October 23, 2019 14:35

Thanks David. I've tried that but it is just displayed as text on the webpage. The "value" of id is not being displayed.

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on October 23, 2019 14:39

Can you share (parts of) the codebefore webpartname.ascx and codebehind webpartname.ascx.cs you have set up?

0 votesVote for this answer Mark as a Correct answer

Michael D answered on October 23, 2019 14:43

I'm not sure exactly what you mean; are you asking for the first bit of code from the web part? <%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_ImageComparisonSlider" CodeFile="~/CMSWebParts/ImageComparisonSlider.ascx.cs" %>

Can I change the language? When I use transformations I use ASCX or Text/XML.

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on October 23, 2019 14:47

Please read the documentation I've linked to, as it will explain how the logic works:

https://docs.kentico.com/k12/developing-websites/developing-web-parts/creating-new-web-parts

You are just adjusting the layout, but there is an actual code file on disk you need to update!

It is located where your project is installed followed by ~/CMSWebParts/ImageComparisonSlider.ascx.cs

0 votesVote for this answer Mark as a Correct answer

Michael D answered on October 23, 2019 14:54 (last edited on October 23, 2019 15:14)

So I can't create new custom widgets (and therefore, custom web parts) strictly in Kentico? I need to use Visual Studio?

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on October 23, 2019 15:19

If you want to start with an empty one from scratch yes... if you clone one of the existing (there is still code that, if permissions are set correctly, gets copied for you).

But not sure any of the existing one meets your needs. You might be able to use the Universal Viewer or a Repeater and get the field values in a transformation.

0 votesVote for this answer Mark as a Correct answer

Michael D answered on October 23, 2019 17:53

Thanks for that David. How can I get a Widget to use a Transformation?

I have set up 2 test widgets that are based on both Universal Viewer and a Repeater. In each, I've enabled the TransformationName property. I then pointed to my new transformation from the Widget on the page.

For a small test, I put plain text in the transformation but it's not showing on the web page.

0 votesVote for this answer Mark as a Correct answer