Version 11.1 - wondering the proper interface to implement if I wanted to create a custom Widget Configuration property.
I believe in prior versions I used an IPropertyControl
Version 11.1 - wondering the proper interface to implement if I wanted to create a custom Widget Configuration property.
I believe in prior versions I used an IPropertyControl
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" />
You can directly write Html/JavaScript to the writer that is passed into the render method or you could also implement IScriptablePlugin to define a widget and pass the writer into the widgetController.RenderContent.
We do also support local templates for custom configuration properties. There is an example of that here: https://community.telligent.com/community/11/w/developer-training/67226/embedding-a-custom-user-interface-for-a-configuration-property. The process is similar, you are just defining the code in a vm file for local templates vs. outputing the html/css from the render method a IPropertyTemplate class.
Thanks. I did get the .vm method to work, but I'm going to probably be using this on a handful of widgets. If I go the iPropertyTemplate route, do I just define the data type as "string" and then the controlType="class, dll" ??
dataType is dependent on your custom property. instead of controlType use template="templatename"
Ok... so TemplateName as defined in the plugin should be some sort of unique key identifier?
yes
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);
}
}
}
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" />
Since you're in the code already, could you try changing the case of the supported data type to "String" from "string"?
Yes. I got mine to work... Now I'm working backwards to try determine what was the culprit. I'll let you know