Global Field Renderer

  • 2
  • Idea
  • Updated 3 months ago
  • (Edited)
Enjoy!

(function(skuid) { /* ========== Custom field type-specific renderers here ========== */ var $ = skuid.$; function defaults(field){ $(field.element).dblclick(function(e) { e.stopImmediatePropagation(); return false; }); $('a',field.element).attr("target", "_blank"); } function customBoolRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customComboRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customCurRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customDateRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customDTimeRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customDblRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customEmailRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customFileRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customIdRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customIntRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customMplRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customPercRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customPhoneRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customPlRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customRefRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customStrRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customTextRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } function customTAreaRenderer(ogRenderer, mode, field, value) { // To call original renderer ogRenderer.apply(this, Array.prototype.slice.call(arguments, 2)); defaults(field); } // Add custom renderers to the map below to be injected const customRenderMap = { // Format of TYPE: functionName, where TYPE is the field type in the original Skuid map BOOLEAN: customBoolRenderer, COMBOBOX: customComboRenderer, CURRENCY: customCurRenderer, DATE: customDateRenderer, DATETIME: customDTimeRenderer, DOUBLE: customDblRenderer, EMAIL: customEmailRenderer, FILE: customFileRenderer, ID: customIdRenderer, INTEGER: customIntRenderer, MULTIPICKLIST: customMplRenderer, PERCENT: customPercRenderer, PHONE: customPhoneRenderer, PICKLIST: customPlRenderer, REFERENCE: customRefRenderer, STRING: customStrRenderer, TEXT: customTextRenderer, TEXTAREA: customTAreaRenderer }; /* ========== Supporting code ==================================== */ const origRenderMap = {}; function ParamInjector(func) { let args = Array.prototype.slice.call(arguments, 1); return function() { return func.apply(this, args.concat(Array.prototype.slice.call(arguments))); }; } /* ========== Main =============================================== */ // Store and then replace skuid renderers Object.keys(customRenderMap).forEach(fieldType => { origRenderMap[fieldType] = {}; Object.keys(skuid.ui.fieldRenderers[fieldType]).forEach((fieldMode) => { origRenderMap[fieldType][fieldMode] = skuid.ui.fieldRenderers[fieldType][fieldMode]; skuid.ui.fieldRenderers[fieldType][fieldMode] = ParamInjector(function(mode, field, value) { customRenderMap[fieldType].apply(this, [origRenderMap[fieldType][fieldMode]].concat(Array.prototype.slice.call(arguments))); }, fieldMode); }); }); })(skuid);
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 4 months ago

  • 2
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
I Like this.
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
Pat, would you share a little bit about what problem you are solving with this? And how you've solved it in this case?