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

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.

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

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 = $(‘<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);

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;”

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 = $(‘

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.

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 = $(’

‘)
.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 = $(’
‘).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 = $(’
').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

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.

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 = $(‘

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.

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