none
Custom Field Type with custom render template at ListView. Using custom Field Property RRS feed

  • Question

  • Hi,
    I've stumbled across a problem with SharePoint 2013 custom render template at ListView.
    I created custom field with custom Properties
    fldtypes_ImagesField.xml:

    <FieldTypes>
      <FieldType>
        <Field Name="TypeName">ImagesField</Field>
        <Field Name="ParentType">Text</Field>
        <Field Name="TypeDisplayName">Images Upload</Field>
        <Field Name="TypeShortDescription">Images Upload</Field>
        <Field Name="UserCreatable">TRUE</Field>
        <Field Name="ShowOnListCreate">TRUE</Field>
        <Field Name="FieldTypeClass">Portal.ImagesFieldType.ImagesField, $SharePoint.Project.AssemblyFullName$</Field>
        <PropertySchema>
          <Fields>
            <Field Name="MaxFiles" DisplayName="Images count" Description="Max images count" Type="Text" Required="TRUE">
              <Default>1</Default>
            </Field>
            <Field Name="ImagesListUrl" DisplayName="Relative Library Url" Description="Relative Library Url for images upload" Type="Text" Required="TRUE">
              <Default>/PublishingImages</Default>
            </Field>
            <Field Name="Width" DisplayName="Width" Description="Max width of image" Type="Text" Required="FALSE">
              <Default>0</Default>
            </Field>
            <Field Name="Height" DisplayName="Height" Description="Max height of image" Type="Text" Required="FALSE">
              <Default>0</Default>
            </Field>
            <Field Name="WidthPreview" DisplayName="Width Preview" Description="Max width for preview image" Type="Text" Required="FALSE">
              <Default>0</Default>
            </Field>
            <Field Name="HeightPreview" DisplayName="Width Preview" Description="Max height for preview image" Type="Text" Required="FALSE">
              <Default>0</Default>
            </Field>
          </Fields>
        </PropertySchema>
      </FieldType>
    </FieldTypes>

    I try to use 2 way

    1. I used JSLink at ListView:

    (function () {    
        var ImageContext = {};
        // You can provide templates for:
        // View, DisplayForm, EditForm and NewForm
        ImageContext.Templates = {};
        ImageContext.Templates.Fields = {
            "ImagesField": {
                "View": ImagesFieldViewTemplate
            }
        };
    
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
            ImageContext
            );
    })();
    
    // The favoriteColorViewTemplate provides the rendering logic
    // the custom field type when it is displayed in the view form.
    function ImagesFieldViewTemplate(ctx) {
        var value = encodeURIComponent(ctx.CurrentItem[ctx.CurrentFieldSchema.Name]);
        var fs = ctx.CurrentFieldSchema;
        var result;
    	if (value)
            result = "<img src='/_layouts/15/h/GetImage.ashx?w=200&h=100&u=" + value + "' >";
        return result;
    }

    I tried to use custom property WidthPreview and HeightPreview for resizing image, but i can't get this property from ctx.
    I find asynchronous ajax method for getting custom property, but asynchronous method is not suitable.

    2. I added at file fldtypes_ImagesField.xml 

    <Field Name="CAMLRendering">TRUE</Field>
    <RenderPattern Name="DisplayPattern">
          <Switch>
            <Expr>
              <Column/>
            </Expr>
            <Case Value="">
            </Case>
            <Default>
              <HTML><![CDATA[<img src="/_layouts/15/h/GetImage.ashx?w=200&h=100&u=]]></HTML>
              <Column/>
              <HTML><![CDATA[" />]]></HTML>
            </Default>
          </Switch>
    </RenderPattern>

    The problem is the same... I can't get custom properties for set parameters "w" and "h".
    I tried different variations:
    <Property Select="WidthPreview">
    <FieldProperty Name="WidthPreview">

    How can I get custom field property for rendering at ListView?
    Or can I use server control for ViewTemplate? (I created New/Edit and Display templates)

    Friday, January 27, 2017 10:09 AM

Answers

  • Hi,

    We can get the field properties using REST API in JSLink.

    The following JSLINK code for your reference:

    (function () {
    
        (window.jQuery || document.write('<script src="//code.jquery.com/jquery-3.1.0.min.js"><\/script>'));
        var ImageContext = {};
        // You can provide templates for:
        // View, DisplayForm, EditForm and NewForm
        ImageContext.Templates = {};
        ImageContext.Templates.Fields = {
            "ImagesField": {
                "View": ImagesFieldViewTemplate
            }
        };
    
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
            ImageContext
            );
    })();
    
    // The ImagesFieldViewTemplate provides the rendering logic
    // the custom field type when it is displayed in the view form.
    function ImagesFieldViewTemplate(ctx) {
        var value = encodeURIComponent(ctx.CurrentItem[ctx.CurrentFieldSchema.Name]);
        var listTitle = ctx.ListTitle;
        var fieldName = ctx.CurrentFieldSchema.Name;
    
        var schemaXml = getFieldSchemaXml(listTitle, fieldName);
    
        var WidthPreview = getFieldValue(schemaXml, "WidthPreview");
        var HeightPreview = getFieldValue(schemaXml, "HeightPreview");
    
        var result;
    
        if (value)
            result = "<img src='/_layouts/15/h/GetImage.ashx?w=200&h=100&u=" + value + "' >";
        return result;
    }
    function getFieldValue(schemaXml, propertyName) {
        var value = "";
        $(schemaXml).find("Property").each(function () {
            var name = $(this).find("Name")[0].innerText;
            if (name == propertyName) {
                value=$(this).find("Value")[0].innerText;
            }
        });
        return value;
    }
    function getFieldSchemaXml(listTitle, fieldName) {
        var schemaXML;
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/fields/getbytitle('" + fieldName + "')/SchemaXml";
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            async: false,
            success: function (data) {
                schemaXML = data.d.SchemaXml;
            },
            error: function (data) {
            }
        });
        return schemaXML;
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, January 31, 2017 2:37 AM
    Moderator