Mobile grid formatting?

[Peter Viglietta]

Hi,

Please see my screenshot below:

[Evgene Karachevtsev]

Hello Peter,

I would rather add the js in the mapping from [] to grid then add another mapping
In this js entire line of the response will be in the variable value (it can be obtained and user id as something like this value.SentFromId)
the grid is generated by the mapping will be available through variable element
And you can apply any formatting to it(add some css class or install some css properties), for example
pre$(element).addClass("alignToRight");/pre
You will only need to describe this class in the custom css file

[Peter Viglietta]

Evgene,

So in the 'Add JS' for the mobilegrid15 response mapping, what code should I add?

It needs to be something like 'if SentFromId is not equal to local storage valuable CurrentUserId, make the message bold', or 'align the message to the right'. As you can see in the screen shot the message is the 'Body' column from the Messages collection.

Will the CSS go directly in the Javascript, and will the whole thing go in the 'Add JS' for mobilegrid15 response?

Can someone tell me how I can accomplish this? Any help is very much appreciated.

[Yurii Orishchuk]

Hi Peter,

Yes you can do it.

Please follow these steps:

1. Open your service mapping.

2. Find your "mobilegrid_15" component and click "add JS".

3. JS editor will appear. Populate it with following code: http://prntscr.com/43tip5/direct

   pre

   var currentUserId = localStorage.getItem("CurrentUserId");

   var SentFromId = value.SentFromId;

   //Condition on "self" message.
   if(SentFromId == SentFromId){

   console.log("Self user message.");

   //Add certain class to the root message element.
   element.addClass("selfUserMessage");

   };

   /pre

   Now all your "self" messages will be marked with "selfUserMessage" css class. So you can implement separate styles you need.

   Regards.

[Peter Viglietta]

Thanks Yurii

How can I change it so that the CSS class only takes effect if the CurrentUserId is not equal to the SentFromId?

I'm not sure how to add the CSS class.. if I wanted to make it bold.. how would I do this?

strong { font-weight: bold; }

[Kateryna Grynko]

Hi Peter,

Please change the "if" condition to the following:preif(SentFromId != SentFromId)/pre
To add a CSS class to a component please declare it in CSS file beforehand:
http://devcenter.appery.io/documentat...

[Peter Viglietta]

I tried adding the code, it's not working.. please see screenshot. I also changed the 'if' clause, because it didn't appear to make sense previously...

[Alena Prykhodko]

Please put dot before class name in CSS asset, should be

pre.ReceiveMessage {font-weight: bold;}/pre

[Peter Viglietta]

I added the dot before the class name, it still doesn't work.

I don't understand why this needs the console.log part, could that be the problem? Why does it say the name of the CSS class there if we're putting it in the element.addclass part right after.. What is it doing?

Could someone review this code and let me know what I'm doing wrong?

var CurrentUserId = localStorage.getItem("CurrentUserId");
var SentFromId = value.SentFromId;
if(CurrentUserId != SentFromId){
console.log("ReceivedMessage");
element.addClass("ReceivedMessage");
}

and the CSS:

.ReceivedMessage {
font-weight: bold;
}

[Yurii Orishchuk]

Hi Peter,

Your JS code seems to be ok.

But CSS not good.

So please try this CSS:

pre

.ReceivedMessage * {
font-weight: bold;
}

/pre

Also you need to replace "*" with your "title" component className or other specific CSS selector.

If you will have problem with this issue, give us your app public link and describe steps to reproduce the problem.

Regards.