How to create an activity stream

[nlarson]

I have created an activity wall using a custom data template. Still bit rough, should work as an example.



Limitations:
1. EXTJS row highlight looks odd if a user clicks into a row
2. This exmaple does not have any links,, but you can use AwareApp links.
3. User must double click to perform the default operation.

put this into a css file, or the header of the custom layout.

Code: Select all

<style>
.vsg-wall-div{ font-family:'Tahoma'; font-size:11px;}

.vsg-wall-status{ font-size:30px; vertical-align:middle;}
 
.vsg-wall-title{font-weight:bold;}

.vsg-wall-desc{	font-size:11px; max-height::30px; overflow:auto;}

.vsg-wall-datetime {font-size:11px; color:#cococo; }

.vsg-wall-highlight{ 
	color:#1986b5;
	font-family:'Tahoma';
	text-shadow: 0 1px 0 #fcfcfc;
	text-align:lef;
	margin-bottom:15px; }

.vsg-wall-tools{color:#1986b5;font-size:11px;}
</style>

this is the body...

Code: Select all

<div class="aw-data-item">
  <div class="aw-custom-line">
  	   <div class="vsg-wall-div">
<table cellpadding="2" border="0"  width="100%">
  <tr><!-- Row 1 -->
     <td valign="top" height="46" width="46" rowspan="3">{Avatar}</td><!-- Col 1 -->
 	 <td valign="top" ><span class="vsg-wall-highlight">{Owner}</span> Updated a <span class="vsg-wall-highlight">{ObjectType}</span></td><!-- Col 2 -->
	 	  <td valign="center" align="right" rowspan="3"><span class="vsg-wall-status">{Status}%</span></td><!-- Col 3 -->
  </tr>
  <tr><!-- Row 2 -->
     <td><span class="vsg-wall-title">{Title} - {UpdateDate}</span></td><!-- Col 2 -->
  </tr>
    <tr><!-- Row 2 -->
	 <td><div class="vsg-wall-desc">{Description}</div></td><!-- Col 2 -->
  </tr>
    </tr>
    <tr><!-- Row 2 -->
	 <td colspan="3" align="right"><span class="vsg-wall-tools"><a href="www.versegoal.com">Tools Coming Soon</a></span></td><!-- Col 2 -->
  </tr>
</table>
</div>
</div>
</div>

[Powerm]

Could you please share with us a sample bsv using these features ?

[nlarson]

Sorry Powerm, my app is commercial software. I am happy to share some samples, but not the entire app. The BSV is essentially the core of our Intellectual Property, so I can't just pass that out.

If you have any questions I would be happy to help.

[RLJB]

Nice work Nlarson, looks great.

Re your comment "EXTJS row highlight looks odd if a user clicks into a row" - if you mean the dark grey highlighting then we overcame this issue by giving it a white background in a <div> then when a user clicks on it - it puts the grey around the highlighted row but doesn't cover the full row completely making it unreadable.

[nlarson]

Nice work Nlarson, looks great.

Re your comment "EXTJS row highlight looks odd if a user clicks into a row" - if you mean the dark grey highlighting then we overcame this issue by giving it a white background in a <div> then when a user clicks on it - it puts the grey around the highlighted row but doesn't cover the full row completely making it unreadable.

nice, I will give that a try!