Is it possible to have multiple Field Renderer in same field?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
Hi

Is it possible to have more than 1 Field Renderer on 1 specific Field?

My use case:

I have a UI-only field with a existing Field Renderer for OnChange handler, and I want to apply the Slider Renderer to that field as well

I tried many combinations and even tried to duplicate fields, and assign 1 field renderer to each, but the onchange handler would not work ...


In case useful here are both Snippets

Onchange Handler:

<CODE> var field = arguments[0],     value = arguments[1], 

    model = field.model, 

    row = field.row, 

$ = skuid.$; 


field.element.change(function(){ 

    //some actions after the value of the element has changed 
skuid.snippet.getSnippet('addDays')();
}); 

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value); </CODE>

Slider:

var params = arguments[0], $ = skuid.$;
var field = arguments[0],   
    value = arguments[1],
    $ = skuid.$;
if (field.mode == 'read') {
    skuid.ui.fieldRenderers.PERCENT.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('&lt;div class=&quot;nx-fieldtext&quot;&gt;')
        .text(skuid.ui.renderers.PERCENT.read({ value: value || '0' }));
    // Render a jQuery ui slider 
    // with step size 1 and boundary range [0,10].
    // Whenever this slider is updated,
    // our row will be updated as well
    var slider = $('&lt;div&gt;').slider({
        value:value || 0,
        min: 1,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            // Update our model with the new value
            field.model.updateRow(
                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID}
            );
            amt.text(skuid.ui.renderers.PERCENT.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('&lt;div&gt;').append(amt,slider);
    field.element.append(sliderContainer);
}

Thx
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Mordechai

Mordechai

  • 968 Points 500 badge 2x thumb
what would be the point in having multiple renderers? having a second renderer would defeat the whole purpose of having the first one because it would override. what you can do is create a renderer that renders multiple fields or runs multiple functions.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
K so if i understand correctly, there would be a way to combine both Snippet above into 1 Snippet?

As i need both to execute.

1 to execute another Snippet when value is changed
and the other is to make that Field appear as a Slider

Thx
Photo of Chris Herr

Chris Herr

  • 436 Points 250 badge 2x thumb
Hi Dave

You can merge the 2 snippets into 1 so it would look like this:

var field = arguments[0],         value = arguments[1], 
    model = field.model, 
    row = field.row, 
    $ = skuid.$; 

field.element.change(function(){ 

    //some actions after the value of the element has changed 
$.snippet.getSnippet('addDays')();
}); 

if (field.mode == 'read') {
    skuid.ui.fieldRenderers.PERCENT.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('&lt;div class=&quot;nx-fieldtext&quot;&gt;')
        .text(skuid.ui.renderers.PERCENT.read({ value: value || '0' }));
    // Render a jQuery ui slider 
    // with step size 1 and boundary range [0,10].
    // Whenever this slider is updated,
    // our row will be updated as well
    var slider = $('&lt;div&gt;').slider({
        value:value || 0,
        min: 1,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            // Update our model with the new value
            field.model.updateRow(
                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID}
            );
            amt.text(skuid.ui.renderers.PERCENT.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('&lt;div&gt;').append(amt,slider);
    field.element.append(sliderContainer);
}

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value); 


Also, why do you use "&lt;div class=&quot;nx-fieldtext&quot;&gt;" instead of "<>"?
For me I got an error trying to run the Renderer with your "&lt;"
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you Chris, 

your code works

But now 1 issue is happening :(

The OnChange event is not working anymore now that i combined both Snippets. Is it possible it's not registering slider being moved, as a change?

The new combine snippet is named: SlideraddDays and has been added in this code below



var field = arguments[0],     value = arguments[1], 

    model = field.model, 

    row = field.row, 

$ = skuid.$; 


field.element.change(function(){ 

    //some actions after the value of the element has changed 
skuid.snippet.getSnippet('SlideraddDays')();
}); 

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);






Regarding use of <>. it's Weird, must have been a paste error, where it got converted in html... as here's what I Use

var params = arguments[0], $ = skuid.$;
var field = arguments[0],   
    value = arguments[1],
    $ = skuid.$;
if (field.mode == 'read') {
    skuid.ui.fieldRenderers.PERCENT.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('<div class="nx-fieldtext">')
        .text(skuid.ui.renderers.PERCENT.read({ value: value || '0' }));
    // Render a jQuery ui slider 
    // with step size 1 and boundary range [0,10].
    // Whenever this slider is updated,
    // our row will be updated as well
    var slider = $('<div>').slider({
        value:value || 0,
        min: 1,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            // Update our model with the new value
            field.model.updateRow(
                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID}
            );
            amt.text(skuid.ui.renderers.PERCENT.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('<div>').append(amt,slider);
    field.element.append(sliderContainer);
}

Thx
Photo of Chris Herr

Chris Herr

  • 436 Points 250 badge 2x thumb
Hi Dave 
Do you have the code in there as you sent it? Because you have 2 times this block in there:

var params = arguments[0], $ = skuid.$;
var field = arguments[0],   
    value = arguments[1],
    $ = skuid.$;


Delete the 2nd one and it should work fine.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Sorry for confusions, here are all 2 snippets exactly as  I have them right now on page
there is no double entry of arguments

Snippet 1 named(Runsnippet + Slider) : 'SlideraddDays'
Combination of 2 Snippets: Onchange(named:RunSnippet) + Slider

var field = arguments[0],         value = arguments[1],     model = field.model, 
    row = field.row, 
    $ = skuid.$; 

field.element.change(function(){ 

    //some actions after the value of the element has changed 
$.snippet.getSnippet('addDays')();
}); 

if (field.mode == 'read') {
    skuid.ui.fieldRenderers.PERCENT.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('<div class="nx-fieldtext">')
        .text(skuid.ui.renderers.PERCENT.read({ value: value || '0' }));
    // Render a jQuery ui slider 
    // with step size 1 and boundary range [0,10].
    // Whenever this slider is updated,
    // our row will be updated as well
    var slider = $('<div>').slider({
        value:value || 0,
        min: 1,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            // Update our model with the new value
            field.model.updateRow(
                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID}
            );
            amt.text(skuid.ui.renderers.PERCENT.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('<div>').append(amt,slider);
    field.element.append(sliderContainer);
}

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value); 


Snippet 2  named: 'addDays'


var params = arguments[0],   $ = skuid.$;var model = skuid.$M('FundingPerformance');
var row = model.getFirstRow();
var dateVar = row.Effective_Balance_Date__c;
var daystoadd = row.days_to_add;
var newdate = row.Date_percentage_reached;

//convert from Salesforce date to Javascript date
var jsDate = skuid.time.parseSFDate(dateVar);
//add days
jsDate.setDate(jsDate.getDate() + daystoadd);
//convert from Javascript date back to Salesforce date
var daysAdded = skuid.time.getSFDate(jsDate);
model.updateRow(row,{Date_percentage_reached : daysAdded});



It looks like because of slider, the code, is not seeing it as a 'change' when i move slider right or left

As the Onchange logic,worked well when it was not a Slider. I would input a number, then click outside of field, and date would change (addDays snippet, would execute)

As well checked in console, the value of date field "Date_percentage_reached" does not change at all when i move slider







I hope it's clearer

Thx
(Edited)
Photo of Chris Herr

Chris Herr

  • 436 Points 250 badge 2x thumb
Hi Dave

I have found the solution for your problem:

You can delete the onchange function, because the slider already has an updateRow function.

Just add the run snippet method in there.

           field.model.updateRow(                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID },
                $.snippet.getSnippet('addDays')();
                
            );

Hope this works for you as well.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi chris, thank you for your Continuous help and sorry to be a bother,

But I tried above code and it gives errors:

I took original Slider code and added sentence for snippet as above, but i see 2 errors

Error 1 Line 25: Expected ')' and instead saw ';' 
Missing Semi colon

error 2: Line 26:  Expected an identifier and instead saw ')'

When i try to fix it i get this error: Uncaught TypeError: Cannot read property 'getSnippet' of undefined

Here's snippet:

var field = arguments[0],       value = arguments[1],
    $ = skuid.$;
if (field.mode == 'read') {
    skuid.ui.fieldRenderers.PERCENT.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('<div class="nx-fieldtext">')
        .text(skuid.ui.renderers.PERCENT.read({ value: value || '0' }));
    // Render a jQuery ui slider 
    // with step size 1 and boundary range [0,10].
    // Whenever this slider is updated,
    // our row will be updated as well
    var slider = $('<div>').slider({
        value:value || 0,
        min: 1,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            // Update our model with the new value
            field.model.updateRow(
                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID},
                $.snippet.getSnippet('addDays')();
            );
            amt.text(skuid.ui.renderers.PERCENT.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('<div>').append(amt,slider);
    field.element.append(sliderContainer);
}

Thx
Photo of Chris Herr

Chris Herr

  • 436 Points 250 badge 2x thumb
Hi Dave

I found a solution for you Problem.

Try 

            // Update our model with the new value
            field.model.updateRow(
                field.row,
                field.id,
                ui.value,
                { initiatorId : field._GUID}
            );
skuid.snippet.getSnippet('addDays')();
amt.text(skuid.ui.renderers.PERCENT.read({ value: ui.value }));

This worked for me.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Chris you are a true champ!

Thank you very much , now it all works as I expected and i'll be able to recreate this on other pages when needed :)

Thank you