O365 - JSLink - Field - Color Picker using Out of the Box MoreColors layout page

Recently noticed this Color picker dialog within the Video portal Channel settings to set the Channel Header background color and started looking into it in details to see whether it can be used as a color picker dialog for other functionalities like Custom Color field etc.

Color Picker within the Video Portal:

The above dialog is rendered using the _layouts/15/morecolors.aspx layout page. This page displays the previous  color value and the selected color is displayed as the new color. In this post, we will see how to use the morecolors.aspx page as a color picker for the custom color field using JSLink and MoreColors.aspx page.

1. Create a field (Text) to store the value.

<Field

       ID="{78ffd318-d7ee-4fda-b786-b9c06e4ca15f}"

       Name="MoreColor"

       DisplayName="More Color"

       Type="Text"

       JSLink="~site/style library/morecolor.js"

       Required="FALSE"

       Group="Custom Site Columns">

  </Field>

• The above creates a MoreColor Text field and uses the morecolor.js to render the field.

2. JSLink - MoreColor.js - render the field using custom template

function morecolorDisplayTemplate(ctx) {

    var fieldId = "moreColorFieldId";

    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

    var fieldhtml = "<div id='morecolorfieldId' data-val='" + color + "' style='width:20px;height:20px;background-color:" + color + ";border:1px solid #000;padding:2px;'></div>";

    return fieldhtml;

};

function morecolorEditTemplate(ctx) {

    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

    formCtx.registerGetValueCallback(formCtx.fieldName, function () {

        return document.getElementById('morecolorfieldId').getAttribute("data-val");

    });

    var ret = "<div id='morecolorfieldId' data-val='" + color + "' style='width:20px;height:20px;background-color:" + color + ";border:1px solid #000;padding: 2px;' onclick='MoreColorDialog(\"" + "morecolorfieldId" + "\")'></div>";

    return ret;

}

(function () {

    var MoreColorCtx = {};

    MoreColorCtx.Templates = {};

    MoreColorCtx.Templates.Fields = {

        "MoreColor": {

            "View": morecolorDisplayTemplate,

            "DisplayForm": morecolorDisplayTemplate,

            "EditForm": morecolorEditTemplate,

            "NewForm": morecolorEditTemplate

        }

    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(MoreColorCtx);

})();

function MoreColorDialog(fieldID) {

    SP.SOD.executeFunc("SP.UI.Dialog.js", "SP.UI.DialogOptions", function () {

        SP.SOD.executeFunc("sp.js", "SP.Utilities.Utility.get_layoutsLatestVersionRelativeUrl", function () {

            var d = SP.UI.$create_DialogOptions();

            if (!IsNullOrUndefined(document.getElementById(fieldID)))

                d.args = document.getElementById(fieldID).getAttribute("data-val");

            else

                d.args = "#FFFFFF";

            var e = SP.Utilities.UrlBuilder.urlCombine(SP.PageContextInfo.get_webServerRelativeUrl(), SP.Utilities.Utility.get_layoutsLatestVersionRelativeUrl());

            e = SP.Utilities.UrlBuilder.urlCombine(e, "morecolors.aspx");

            d.url = e;

            d.title = "More Colors";

            d.dialogReturnValueCallback = function (d, b) {

                if (d === SP.UI.DialogResult.OK) {

                    document.getElementById(fieldID).setAttribute("data-val",b);

                }

            };

            SP.UI.ModalDialog.showModalDialog(d);

            return false

        })

    });

}

3. Display the Color Field within a list (View - function morecolorDisplayTemplate)

• The JSLink function morecolorDisplayTemplate renders the text value as a DIV element with the background color as the selected value.

4. Edit Item (Edit - morecolorEditTemplate)

• The JSLink function morecolorEditTemplate renders the color field with an onClick event attached to it so that the user can modify the color.

5. Color Picker Dialog (function MoreColorDialog)

• OnClick of the MoreColor field will display the Color picker dialog.
• The current value of the field is passed to the More Color dialog as an argument. 
• The selected new color is captured within the Dialog result handler and the field value is set as an data attribute.
• The call back function (formCtx.registerGetValueCallback) reads the data attribute and returns the latest selected value.

by Balamurugan Kailasam via Everyone's Blog Posts - SharePoint Community