Custom Widget Configuration Property

IPropertyTemplate is the new interface for defining custom widget configuration properties

https://community.telligent.com/community/11/w/api-documentation/64400/ipropertytemplate-plugin-type

What goes in the render method?  HTML and Javascript?...kind of what I'd put in a .vm file if I was to do it this way:
<property labelText="Select a Resource" id="message" dataType="string" template="searchSelection.vm" />

Just rendering a plain textbox now  I'll debug and follow-up.

Doesn't look like the plugin is firing.  I deployed it and enabled.  Here is my code and how I'm referencing it in a widget.  If I use the same stuff in a .vm file it works.

<property labelText="Select a Resource" id="message" dataType="string" template="SearchableContentControl" />

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Telligent.Evolution.Extensibility.Configuration.Version1;

namespace HearingFirst.Plugins.Controls.PropertyControls
{
    public class SearchSelectionControl : IPropertyTemplate
    {
        public string[] DataTypes {

            get
            { 
                string[] d = new string[1] { "string" };
                return d;
            }
        }

        public string TemplateName => "SearchableContentControl";

        public bool SupportsReadOnly => false;

        public PropertyTemplateOption[] Options
        {
            get
            {
                return new PropertyTemplateOption[0];
            }
        }

        public string Name => "Hearing First - Searchable Content Widget Configuration Control";

        public string Description => "Provides functionality for selectable content control in widget configurations";

        public void Initialize()
        {

        }

        public void Render(TextWriter writer, IPropertyTemplateOptions options)
        {
            string defaultOption = "<option value=\"test\" >Search</option>";
            if (options.Value != null)
            {
                defaultOption = "<option value=\"placeholder\" >"+options.Value.ToString() + " </option>";
            }

            string script = String.Format(@"<select class=""form-control"" id=""{1}"" name=""$id"" style=""width: 100 % "">
                {3}
            </select>

            <script type=""text/javascript"">
            $(function() {
    
                jQuery('#${0}').select2({
                      ajax: {
                        url: ""$core_v2_widget.GetExecutedFileUrl('searchcallback.vm')"",
                        dataType: 'json',
                        placeholder: 'Search for an item',
                        minimumInputLength: 3,
            
                        // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                      }
                });
    
                var api = $context_v2_propertyTemplate.JsonApi;
     
                api.register({
                   hasValue: function() { 
                       return true;
                   },
                   val: function(val) {
                       return jQuery(""#{2}"").val();
                   }
                });

            });
            </script>", options.UniqueId.ToString(), options.UniqueId.ToString(), options.UniqueId.ToString(), defaultOption);

            writer.Write(script);
        }
    }
}

Velocity is not going to process, so all that code needs to be redone.  Your ajax callback would need to be to a rest endpoint or you could implement IHttpCallback as well and have it call back to this class.  I will take a look in the morning and see if we have a good straightforward example.

Right, I replaced the Velocity with C#  but I just get a straight textbox and the render method never hits when debugging

Just to verify, does your SearchableContentControl show in the property template documentation in Widget/Theme/Automation Studio? If not, it didn't initialize properly or wasn't enabled.

I believe so.  I see this in the API docs tab at the bottom

When you render the configuration form making use of this property, are any exceptions logged? You may have issues with the stray { } in the JavaScript of your string used with FormatString.

No exceptions.  And when I debug, it doesn't even enter the Render method

I changed my code to the below and still just get a plain text box...the Render method never fires.

        public void Render(TextWriter writer, IPropertyTemplateOptions options)
        {
            string defaultOption = "<option value=\"test\" >Search</option>";
            if (options.Value != null)
            {
                defaultOption = "<option value=\"placeholder\" >"+options.Value.ToString() + " </option>";
            }

            string script = "hello world";

            writer.Write(script);
        }

This works for me to display Hello World:

using System.Collections.Generic;
using System.IO;
using Telligent.Evolution.Extensibility.Configuration.Version1;

namespace Samples
{
    public class TestPropertyTemplate : IPropertyTemplate
	{
		#region IPlugin

		public string Name => "Test Template";

		public virtual string Description => $"template test";

		public virtual void Initialize()
		{
		}

		#endregion

		#region IPropertyTemplate

		public string[] DataTypes => new string[] { "Custom" };

		public string TemplateName => "testTemplate";

		public bool SupportsReadOnly => true;

		public virtual PropertyTemplateOption[] Options
		{
			get
			{
				var options = new List<PropertyTemplateOption>();
				return options.ToArray();
			}
		}

		public void Render(TextWriter writer, IPropertyTemplateOptions options)
		{
			string script = "hello world";

			writer.Write(script);
		}
		#endregion
	}
}

Here is the configuration declaration:

	<property id="test" defaultValue="" dataType="Custom" template="testTemplate" />

This works for me to display Hello World:

using System.Collections.Generic;
using System.IO;
using Telligent.Evolution.Extensibility.Configuration.Version1;

namespace Samples
{
    public class TestPropertyTemplate : IPropertyTemplate
	{
		#region IPlugin

		public string Name => "Test Template";

		public virtual string Description => $"template test";

		public virtual void Initialize()
		{
		}

		#endregion

		#region IPropertyTemplate

		public string[] DataTypes => new string[] { "Custom" };

		public string TemplateName => "testTemplate";

		public bool SupportsReadOnly => true;

		public virtual PropertyTemplateOption[] Options
		{
			get
			{
				var options = new List<PropertyTemplateOption>();
				return options.ToArray();
			}
		}

		public void Render(TextWriter writer, IPropertyTemplateOptions options)
		{
			string script = "hello world";

			writer.Write(script);
		}
		#endregion
	}
}

Here is the configuration declaration:

	<property id="test" defaultValue="" dataType="Custom" template="testTemplate" />

Are there any plans to get examples like this added to the Telligent GitHub repo? This kind of thing is really useful to developers who want to get working examples without trawling the forums & trying to piece things together.