Here's how far I've gotten on a SMS Custom Template. needHlp

[Jaymer]

Hope someone can help me with this.
The main issue is with the CSS - right now, I can't figure out how to get the timestamp tucked in under the bubble.

Screen Shot 2018-03-19 at 11.42.40 PM.png (165.52 KiB) Viewed 28624 times

This project was from here: https://www.templatemonster.com/blog/ch ... -tutorial/

My Custom Template is pretty simple - though wrong:
<div class="bubble {C1}"><p>{Message}</p></div>
<div class="cts {C2}">{ContactTime}</div>

Here's my data. In reality, the data should just have "I"ncoming, or "O"utgoing fields, but for now, because I didn't want to get bogged down in complex IF statements in the custom Template, I just made it easy and put the variable data in the C1 & C2 fields.
One might want to simplify the HTML/CSS and put ContactTime inside the 1st <div>, then it appears inside the bubble, and I want it outside.

Screen Shot 2018-03-19 at 11.54.46 PM.png (28.96 KiB) Viewed 28624 times

here's the CSS
-----------------------

Code: Select all

.cts {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}
.cts-alt {
  float: right;
}

.cts p {
  font-size: 0.7em;
}

/** ios1-ios6 bubbles **/
.bubble {
  box-sizing: border-box;
  float: left;
  width: auto;
  max-width: 80%;
  position: relative;
  clear: both;
  
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
 
  border: solid 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  
  margin-bottom: 20px;
  padding: 6px 20px;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 5px;
  content: '';
  display: block;
  position: absolute;
}
.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.5);
  bottom: 0px;
  left: -7px;
  z-index: -2;
}
.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #e5e5e5;  /* arrow color */
  bottom: 1px;
  left: -5px;
}


.bubble-alt {
  float: right;
}
.bubble-alt:before {
  left: auto;
  right: -7px;
}
.bubble-alt:after {
  left: auto;
  right: -5px;
}

.bubble p {
  font-size: 1.0em;
}

/* green bubble */
.green {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47));
  background-image: -webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7acd47', endColorstr='#ace44b');
}
.green:after {
  border-bottom-color: #ace44b;
}

/* white bubble */
.white {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
}
.white:after {
  border-bottom-color: #e5e5e5;
}

[Pomegranate]

Hello Jaymer,

This issue is caused because of the

Code: Select all

float:left; float:right; 

css codes.

Please try just adding

Code: Select all

<br/>

between the html elements, for example.

Code: Select all

<div class="bubble {C1}"><p>{Message}</p></div>
<br/>
<div class="cts {C2}">{ContactTime}</div>

Code: Select all

<br/>

is a simple way to start from a new row in HTML, if it doesn't work, we'd need to fix/modify your CSS a bit, I can't commit to it at the moment, so please tell me if it worked.

Cheers,

[Pomegranate]

Hmm, scratch that, it wouldn't work because the CSS is overriding the positioning of everything, we'll just need to modify your CSS codes, I'll see if I can get to it soon.

Cheers

[ACDC]

The main issue is with the CSS - right now, I can't figure out how to get the timestamp tucked in under the bubble.

Would it not be easier putting it inside the bubble, smaller text and in another color?

[Pomegranate]

Got it, so float:left/right is kind of old and might get deprecated soon,

Its normally easier to use display:inline-block with some tuning.

Anyways, you can do this for now,

Code: Select all

<div class="bubble {C1}"><p>{Message}</p></div>
<div class="float-cleaner">
<div class="cts {C2}">{ContactTime}</div>

<style>
.float-cleaner {
clear: both;
}
</style>

This should work.

float:left/right should be cleared, or everything under it gets kind of affected.

[customaware]

With Khosbayar's adjusted html and the following css file (includes Khosbayar's new css class) it works...

Code: Select all

.cts {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
  float:left;
  padding-left: 8px;
}
.cts-alt {
  float: right;
  padding-right:8px;
}

.cts p {
  font-size: 0.7em;
 
}

.float-cleaner {
clear: both;
}

/** ios1-ios6 bubbles **/
.bubble {
  box-sizing: border-box;
  float: left;
  width: auto;
  max-width: 80%;
  position: relative;
  clear: both;
  
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
 
  border: solid 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  
  margin-bottom: 3px;
  margin-left:5px;
  padding: 6px 20px;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 5px;
  content: '';
  display: block;
  position: absolute;
}
.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.5);
  bottom: 0px;
  left: -7px;
  z-index: -2;
}
.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #e5e5e5;  /* arrow color */
  bottom: 1px;
  left: -5px;
}


.bubble-alt {
  float: right;
  margin-right:5px;
}
.bubble-alt:before {
  left: auto;
  right: -7px;
}
.bubble-alt:after {
  left: auto;
  right: -5px;
}

.bubble p {
  font-size: 1.0em;
}

/* green bubble */
.green {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47));
  background-image: -webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7acd47', endColorstr='#ace44b');
}
.green:after {
  border-bottom-color: #ace44b;
}

/* white bubble */
.white {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
}
.white:after {
  border-bottom-color: #e5e5e5;
}

[Jaymer]

FANTASTIC
Here's where we are now...

Screen Shot 2018-03-20 at 11.35.48 AM.png (194.21 KiB) Viewed 28577 times

If you scroll down to see the entire image, you'll notice:

1) This is a Query
2) Because its a Custom Query, you have no way to turn off Paging, buttons, Count, etc.
3) It also opens VERY WIDE - as most POPUP Windows do. Its called from a button in Panel Operations when you are viewing a Contact. Since its not a normal Query, the option for setting WIDTH is not there.
4) Need to auto-scroll all the way to the bottom to see the most recent messages.
5) How would we ever be able to ENTER A REPLY into the SMS thread?

thx
jaymer...

[Jaymer]

I imagine this is about as far as we can go in native aware.
Am exploring plugins to fully execute this as a SMS solution.

[Jaymer]

Got it, so float:left/right is kind of old and might get deprecated soon,

yes, that original article was from 4 years ago.
thanks for the help & look forward to seeing your cool Templates at the conference.

[customaware]

I imagine this is about as far as we can go in native aware.
Am exploring plugins to fully execute this as a SMS solution.

Haven't checked but try doing the same as a Custom List on a form. If I recall, no navigation bar on a Custom List and you can control the width.

I think most of the other stuff you mention regarding reply buttons etc is all doable.

In fact one of the sessions at the Conference will demo precisely that.

[Jaymer]

Thanks Mark, had forgotten about that.
Seems to work nicely...

Screen Shot 2018-03-20 at 10.08.40 PM.png (157.53 KiB) Viewed 28546 times

Am using a field in the Lead BO there on the bottom to enter the SMS, and a rule that fires when it sees something in that field. Sends it, adds it to the om_Communication list of the lead, blanks it out and screen redraws. Pretty cool.

ISSUES
1) Sporadic MULTIPLE messages will be sent/texted when clicking the button ONCE
2) 1 out of 10-15 times I'll get a "Record was modified by another user". No rhyme or reason. I'm the only user on.

[tford]

1 out of 10-15 times I'll get a "Record was modified by another user". No rhyme or reason. I'm the only user on.

There IS a reason .. you just haven't discovered what it is yet.

"Another user" can be you. Some other process or action is somehow updating without an auto refresh or the like.

[Jaymer]

tom, but its just not repeatable at all... just as flakey as pressing ENTER on the Save button, and most of the time only 1 text message goes out, but sometimes 2 messages (a duplicate). Same if I click on it ONLY ONCE, sometimes its sends a dup.

Haven't look at logs yet to find out whats up.
Played with the Rule Priority (35 and 85) in case another rules was firing and causing a timing issue - but that didn't change anything.

[RLJB]

Did anyone ever solve this:

4) Need to auto-scroll all the way to the bottom to see the most recent messages.

We have a chat thing, and would like to do the same.

eg when query is opened, have it automatically scroll to the bottom of the query.

I think this is the solution:
https://stackoverflow.com/questions/397 ... lly-scroll

But I have no idea how to implement it. I put this in the Render Script on the query and but it doesn't work:

var scrollGridDown = function() {
var content = $(grid.element).find(".k-scrollbar").get(0);

content.scrollTop = content.scrollHeight;
};

Any ideas?

[hpl123]

Just FYI. I did a chat proof of concept at one point in Aware and this IS possible. I unfortunately don´t have any "code" saved and it´s not something one/I can quickly scribble down here. If I remember correctly I used jQuery to achieve this but can´t remember the specifics.