3

In Sitecore Rocks -- when editing ColumnField -- how do I format the text in a field?

Basically, I have data being inserted into the ListControl via a SearchDataSource. One of the fields is a date field and it is coming through as: 2016-10-26T03:47:53.259Z

I would like it a little cleaner in MM/dd/yyyy hh:mm AM/PM format.

I see a field called Formatter but not sure what I should put in there.

5

The Formatter field is really only for date formatting, which is good since that is what you are looking for.

The options for formatting the dates include the following list. Scroll to the bottom to get the full definition and regex treatment applied:

  • mmss
  • mss
  • hmm
  • hm
  • ms
  • ampm
  • ap
  • yyyy
  • yy
  • mm
  • m
  • dd
  • d
  • hh
  • h
  • ss
  • s

Background Information

How is Formatter Handled?

The Formatter field coming out of the ColumnField item type is used in the ListControl class as a Backbone data-bind attribute. You can see it in action below. The key to note is the formatValue(DataField,formatter) that is being used.

public virtual string RenderRow()
{
  Item dataSource = this.GetDataSource();
  if (dataSource == null)
    return string.Empty;
  StringWriter stringWriter = new StringWriter();
  HtmlTextWriter output = new HtmlTextWriter((TextWriter) stringWriter);
  foreach (Item child in dataSource.Children)
  {
    string str1 = string.IsNullOrEmpty(child["ContentAlignment"]) ? string.Empty : " sc-text-align-" + ClientHost.Items.GetItem(child["ContentAlignment"]).Name.ToLower();
    output.AddAttribute(HtmlTextWriterAttribute.Class, "ventilate" + str1);
    output.AddAttribute("data-sc-important", "data-sc-important");
    string str2;
    if (string.IsNullOrEmpty(child["Formatter"]) && string.IsNullOrEmpty(child["HTMLTemplate"]))
    {
      string str3 = "typeof $data['" + child["DataField"] + "'] != 'undefined' ? $data['" + child["DataField"] + "'] : ''";
      str2 = string.Format("{0},{1}", (object) ("text: " + str3), (object) ("attr: { title: " + str3 + " }"));
    }
    else if (string.IsNullOrEmpty(child["DataField"]) && !string.IsNullOrEmpty(child["HTMLTemplate"]))
      str2 = "html: formatValue('', '" + child["HTMLTemplate"] + "')";
    else
      str2 = string.Format("{0},{1}", (object) ("text: formatValue('" + child["DataField"] + "', '" + child["Formatter"] + "')"), (object) ("attr: { title:  formatValue('" + child["DataField"] + "', '" + child["Formatter"] + "')}"));
    ListControl.SetWidthStyle(output, child);
    output.AddAttribute("data-bind", str2);
    output.RenderBeginTag(HtmlTextWriterTag.Td);
    output.RenderEndTag();
  }
  return stringWriter.ToString();
}

formatValue(object,format)

This is a Sitecore ListControl.js Javascript method that is getting passed through the data-bind attribute listed above and executed on the client side when the List is created and displayed. It appears that formatValue() really is only meant to handle date formatting. However, as you look at formatValue() method below, you'll note that the dateConverter.toStringWithFormat() is getting called out of the Sitecore minified Backbone javascript.

    // apply formating
    itemModel.viewModel.formatValue = function (name, format) {

      var val = "";

      //  Checking for this[name]() invokes binding, so make sure this[name] is a function
      if (typeof this[name] === 'function' && name != "" && typeof this[name]() != 'undefined') {
        val = this[name]();
      }

      var tempValue = '';
      var additionalValues;
      if (this.$formattedFields) {
        additionalValues = this.$formattedFields();
      }

     if (format && format == "short") {
       if (additionalValues && additionalValues[name]) {
          tempValue = additionalValues[name].shortDateValue;
          if (tempValue) val = tempValue;
        }
      }
      else if (format && format == "long") {
        if (additionalValues && additionalValues[name]) {
          tempValue = additionalValues[name].longDateValue;
          if (tempValue) val = tempValue;
        }
      }
      else if (format) {
        var isHtmlTemplate = val == "" && name == "";
        if (isHtmlTemplate) {
          var viewModel = this;
          var getValue = function (fieldname) {
            if (typeof viewModel[fieldname] != "undefined") {
              return viewModel[fieldname]();
            }
            return undefined;
          };
          tempValue = sc.Helpers.string.formatByTemplate(format, getValue);

        } else if (sc.Helpers.date.isISO(val)) {
          var dateConverter = sc.Converters.get("date");
          tempValue = dateConverter.toStringWithFormat(val, format);
        }
        if (tempValue) val = tempValue;
      }

      return val;
    };
    this.collection.add(itemModel);
  }, this);

What can I pass into the Formatter Field?

By looking at the toStringWithFormat method, you can pretty easily tell what date formatting options you have.

  toStringWithFormat: function (value, format) {
    if (Utils.date.isISO(value)) {
      try {
        var date = Utils.date.parseISO(value);
        var formats = {
          mmss: {
            expression: "(\\W|^)mm(\\W+s{1,2}\\W|\\W+s{1,2}$)",
            value: Utils.date.ensureTwoDigits(date.getUTCMinutes())
          },
          mss: {
            expression: "(\\W|^)m(\\W+s{1,2}\\W|\\W+s{1,2}$)",
            value: date.getUTCMinutes().toString(),
          },
          hmm: {
            expression: "(\\Wh{1,2}\\W+|^h{1,2}\\W+)mm(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCMinutes()),
          },
          hm: {
            expression: "(\\Wh{1,2}\\W+|^h{1,2}\\W+)m(\\W|$)",
            value: date.getUTCMinutes().toString(),
          },
          ms: {
            expression: "(\\Wss\\W|^ss\\W)00(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCMilliseconds()),
          },
          ampm: {
            expression: "(\\W|^)AM/PM(\\W|$)",
            value: ((date.getUTCHours() >= 12) ? "PM" : "AM"),
          },
          ap: {
            expression: "(\\W|^)A/P(\\W|$)",
            value: ((date.getUTCHours() >= 12) ? "P" : "A"),
          },
          yyyy: {
            expression: "(\\W|^)yyyy(\\W|$)",
            value: date.getUTCFullYear().toString(),
          },
          yy: {
            expression: "(\\W|^)yy(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCFullYear() % 100),
          },
          mm: {
            expression: "(\\W|^)mm(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCMonth() + 1),
          },
          m: {
            expression: "(\\W|^)m(\\W|$)",
            value: (date.getUTCMonth()+1).toString(),
          },
          dd: {
            expression: "(\\W|^)dd(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCDate()),
          },
          d: {
            expression: "(\\W|^)d(\\W|$)",
            value: date.getUTCDate().toString(),
          },
          hh: {
            expression: "(\\W|^)hh(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCHours()),
          },
          h: {
            expression: "(\\W|^)h(\\W|$)",
            value: (date.getUTCHours() > 12) ? (date.getUTCHours() - 12).toString() : ((date.getUTCHours() == 0) ? 12 : date.getUTCHours()).toString(),
          },
          ss: {
            expression: "(\\W|^)ss(\\W|$)",
            value: Utils.date.ensureTwoDigits(date.getUTCSeconds()),
          },
          s: {
            expression: "(\\W|^)s(\\W|$)",
            value: date.getUTCSeconds().toString()
          }
        };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.