Access custom web parts fields in custom layout (for aforementioned web part)

Trevor Chinn asked on August 22, 2016 12:55

Hello again!

I was asked to create a web part (or something similar) that would allow the non-technical content writers to drop it on a page/design tab and be able to select an image and have their text overlayed on said image. The CSS/HTML is no drama, however if possible I don't want to implement a new web part from scratch through VS for what seems like a perfect situation for some web part inheritance.

I created a new web part that inherits from the Editable Text web part, and I thought it would be very simple to add one more field (BG image) and have that show in a predefined default layout.

The problem is that no matter how much documentation nor Q&A things I read, I cannot figure out how to call the value that the user has entered into that field (when setting up the widget on the page). I suspect what I am trying to do may not be possible, but if it is, it will save me a heap of trouble getting the custom widget set up in VS and then exporting that to the live site etc etc.

Of course I could easily just wrap it in the before/after content in the HTML Envelope, but that would mean it has to be entered every time.

If there is any way to accomplish what I am trying to do, please let me know!

The BackgroundImage field setup Image Text

The layout that I am trying to insert. The ???????????? is where I can't get anything to work. I tried an ASP label but it just spits out some random CSS class name. Image Text

Here are the things I looked at regarding it, maybe I missed something?

Correct Answer

Richard Sustek answered on August 22, 2016 13:57

What you are trying to do is possible, but it's not that easy. To understand it is good to know what is happening with Web part properties that are set on a particular page. So - everytime to add a web part to a page and set its properties, the value in these properties are stored in Database along with Page template and its layout.

What this means is that in order for you to get any value from the web part you need to get it from the template and from the particular web part (based on its ID because there may be more same web parts on the same page)

Needless to say, this isn't possible without going to code and creating some Helper function/macro to help you with this. I've personally used this code to get value of a property of a web part on current page template:

 PageTemplateInfo template = PageTemplateInfoProvider.GetPageTemplateInfo(CurrentPageInfo.GetUsedPageTemplateId());
        if (template != null){
            WebPartInstance thisWebPart = template.GetWebPart("QueryDataSource");
            if (thisWebPart != null){
                var someValue = thisWebPart.GetStringValue("SomeProperty", "");

This requires you to know the ID of the webpart which in my example was QueryDataSource.

In another scenario you can also loop trough all web parts and get its values like:

 PageTemplateInfo pti = CurrentPageInfo.DesignPageTemplateInfo;

            foreach (WebPartZoneInstance wpz in pti.WebPartZones)
                foreach (WebPartInstance wpi in wpz.WebParts)
                    if (wpz.WidgetZoneType == WidgetZoneTypeEnum.None)
                        if (wpi.ControlID == "PagesDataSource")
                            var someValue = wpi.GetValue("SomeProperty").ToString();
1 votesVote for this answer Unmark Correct answer

Recent Answers

Fabian Haeger answered on August 22, 2016 13:49 (last edited on August 22, 2016 14:04)

ED: Totally missinterpreted your question

for future reference

Here is a little provider method I wrote for this use case

    public static class ImageProvider
        public static string GetImageUrl(string permanentUrl, int width, int height)
            var querylessUrl = URLHelper.RemoveQuery(permanentUrl);
            var query = URLHelper.GetQuery(permanentUrl);
            var queryCollection = HttpUtility.ParseQueryString(query);

            queryCollection["width"] = width.ToString();
            queryCollection["height"] = height.ToString();

            return URLHelper.AppendQuery(querylessUrl, queryCollection.ToString());

Make sure, you have the use of permanent image URLs activates for your Media Library.

By using this method, you'll get the Image URL, which you can add into your aspx then. Inside your cs class, you should work with something like this:

public string Background = ImageProvider.GetImageUrl(this.GetStringValue("BackgroundImage", string.Empty), 400, 250));

You can then simply access the url with the default apsx <%# Background %>

Edit: When you have permanent URLs enabled, it should be enough, to just use public string Background = this.GetStringValue("BackgroundImage", string.Empty);

0 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on August 22, 2016 14:00

Trevor, not sure where you are with configuration right now. This is how I will do.

I am taking example of Editable Image Webpart based Widget

  1. Create a Widget using my custom webpart.
  2. Go to widget properties. Select the field that I would like to editor to update without changing code. In my case it was "Default Image"
  3. See on the right side that this field is checked. Display field in the editing form
  4. The column name was "Default Image". Now in my html code I can access this field as {%DefaultImage%}. That's it.

Image Attached.

1 votesVote for this answer Mark as a Correct answer

Trevor Chinn answered on August 23, 2016 04:04

Thank you gentlemen! As I suspected, this isn't doable without some code meddling, which for this particular instance I would prefer to avoid. At the end of the day we will only be using this on three to five different pages, and as such it is easy enough to just duplicate the regular Editable Text with the before/after parts prefilled and just have the content editor copy paste the background path.

Your responses gave me a much better understanding of the inner workings of the system and when I come across something that merits actually creating a proper custom widget/part, I will be sure to refer to this thread!

Thanks again!

0 votesVote for this answer Mark as a Correct answer

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