Custom Field Renderer in Mobile Composer?

For sure. You’d create two identical divisions with rendering set on it based on the field you want. Then style each division as needed using a wrapper and add styles to the wrappers.

Hopefully there is an easier way to do this without having to create two sets of identical divisions.

It would be cool if classes could be conditionally set. Then you could just manage the styling with CSS and one layout.

Hi Pat, 

Thanks for the suggestion! Our use case is about product groups with different items in them, and all the items of the same product group should be displayed with the same background colour. 

Using your method, let’s say if we had 10 product groups, we would have to include 10 cloned divisions in the deck with wrappers, and different rendering conditions applied to each of them. Is that correct?

Would be curious if other people have used other workarounds, or if there is an “official” way to hack this.

Much appreciated, 

Robin

See. This is how the solution I have is ugly! Works but very very ugly.

I would suggest creating some javascript to insert a class based on the product group. Then it would be very easy to set css to manage the styling. This is certainly possible. Wouldn’t take much time to do this.

Once the javascript is written, all you would have to manage would be the CSS.

Add a product group, update the CSS. Done.

Thanks again for clarifying! We have beautiful Javascript for this working in the desktop composer. The mobile composer does not seem to offer me options to apply custom javascript field renderers, just the non-java render conditions. 

Am I missing something obvious here? Being able to use our scripts would solve the problem!

There is a location to include javascript. Are you looking to style and/or display input based on product group?

Ok, got it. Took me a while to catch up. Indeed missed the obvious since I looked for the option on the deck. Thank you Pat for sticking through this 🙂 Now that I found the option on the FIELD, is there a way to style the background of the DECK the field is in, based on a Javascript renderer I set in the field? On the desktop page, we were able to set the background colour of the row in a table based on a custom field renderer with field.item.element.addClass(‘class-name’), field being arguments[0] and the CSS being very specific with table.nx-skootable-data tbody tr.highlighted-row td { background-color: lightblue; } I would assume that the table and tbody classes won’t have an effect on the deck in the mobile page?

Hopefully this helps. Change the custom component JavaScript to use a field in your org. Note that I am not a jQuery/CSS developer so what I have provided may need to be optimized.

var row = component.context.item.row;
var isActive = row.helios__Active__c == ‘Yes’ ? true : false;
console.log(isActive);
if (isActive) {
component.context.item.element.find(‘div.sm-card-body’).css( “background”, “lightblue” );
} else {
component.context.item.element.find(‘div.sm-card-body’).css( “background”, “pink” );
}

Class is in session! Professor Waldman making it look easy.

Going to use this myself.

Hi Pat and Irvin, 

Thank you so much for the contribution! I was actually able to make it work, however not using component and component.context as in Irvin’s example (those would just come up as undefined).

The guidance regarding the .find and then setting the .css directly was what got me on the right tack. It renders beautifully and for our use case is more appropriate than cloning divisions, however will use Pat’s solution in scenarios with fewer variables. 

Here is my working code, saved as Resource Javascript Snippet (Inline), and then assigned as custom field renderer to the field I want to evaluate in the deck I want to colour in:

var field = arguments[0],   
value = arguments[1],
    $ = skuid.$;
var csspath = field.item.element;
var Pro1 = “Awesome Product Name”;
var Pro2 = “Best Product Ever”;

if (value != null) {
   
if (~value.indexOf(Pro1)) {
    field.element.text(value);
csspath.find(‘div.sm-card-inner’).css( “background”, “#B6CCFF” );
} 
else if (~value.indexOf(Pro2)) {
    field.element.text(value);
csspath.find(‘div.sm-card-inner’).css( “background”, “orange” );
} else {
    field.element.text(value);
csspath.find(‘div.sm-card-inner’).css( “background”, “#1390CD” );   
}
}