Facility Control

Hi,

I am currently creating a chat window in DashBoard using a multi-line parameter. The chat functionality works as expected, but it does look strange the way a multi-line param is implemented as a table. the entries are centered, but at the same time left-aligned. I did not find a way to align differently.

Is there an easy way? I attached my grid file so you can see what I mean.

Attachment(s)

Chat.grid.zip   1 KB 1 version

Hi Vincent
Sorry for the delayed response. Your best option is probably to use a script table to inject HTML around your multiline text data - this will give you complete control over how it is rendered. The default renderer only uses enough width to display the data and centers additional lines within it - you can overcome this limitation by specify an absolute width.
Attached is a modified version of your panel that uses the script table with HTML wrapping:

<abs contexttype="opengear" gridsize="10" jsonport="5254" keepalive="true" touch="true">
   <meta>
      <params>
         <param access="1" maxlength="0" name="User Name" oid="userName" type="STRING" value="Username1" widget="default"/>
         <param access="1" maxlength="0" name="Chat Master" oid="chatMaster" precision="0" type="STRING_ARRAY" widget="multiline-text">
            <value>Username1:
Short Text
With new Line</value>
            <value>Username2:
Long Text with a lot written on the first line until the end of the box and a
short second line</value>
            <value>Username1:
</value>
            <value>Username1:
</value>
            <value>Username1:
this
is
a 
long
one
</value>
         </param>
         <param access="1" maxlength="0" name="User Chat" oid="userChat" type="STRING" value="" widget="multiline-text"/>
         <param access="1" constrainttype="STRING_CHOICE" name="Chat Table" oid="chatTable" precision="0" type="INT16" value="1" widget="script-table">
            <constraint>chatMaster</constraint>
         </param>
      </params>
      <api immediate="true">var model = {

      htmlIfy: function(str)
      {
         return '&lt;html&gt;&lt;body&gt;&lt;div style="width: 800px; text-align:center"&gt;'  + str.split('&amp;').join('&amp;amp;').split('&lt;').join('&amp;lt;').split('\n').join('&lt;br/&gt;') + '&lt;/div&gt;&lt;/html&gt;';
      },
   
      getRowCount: function()
      {
         return params.getElementCount('chatMaster');
      },

      getColumnCount: function()
      {
         return 1;
      },
      
      getValueAt: function(row, col)
      {
         return this.htmlIfy(params.getValue('chatMaster', row) + '');
      }
   };</api>
      <ogscript handles="onchange" oid="chatMaster">model.model.rowCountChanged(model.getRowCount());</ogscript>
   </meta>
   <table height="50" left="20" style="size:16;" top="20" width="940">
      <tr>
         <label anchor="east" fill="none" insets="0,0,0,5" name="Chat User Name: " style="size:16;" weightx="0.0"/>
         <param anchor="west" expand="true" fill="both" oid="userName" showlabel="false" style="size:16;" weightx="1.0" weighty="1.0"/>
      </tr>
   </table>
   <param bottom="80" expand="true" height="90" left="20" oid="userChat" showlabel="false" style="size:16;" width="940"/>
   <button bottom="20" buttontype="push" height="50" left="20" name="SEND TO CHAT" style="size:16;" width="250">
      <task tasktype="ogscript">var listCount = params.getElementCount('chatMaster');

if (listCount == 1 &amp;&amp; params.getValue('chatMaster', 0) == "") // If this is the first element and it has not been set yet
{
listCount = 0;
}

var newName = params.getValue('userName', 0);
var newChat = params.getValue('userChat', 0);
var newValue = newName + ":" + "\n" + newChat;

params.setValue('chatMaster', listCount, newValue);
params.setValue('userChat', 0, "");</task>
   </button>
   <param bottom="180" expand="true" left="20" oid="chatTable" showlabel="false" style="size:16;" top="80" width="940">
      <config key="w.cellediting">false</config>
      <config key="w.showheader">false</config>
      <config key="w.padding">10,10</config>
      <config key="w.model">model</config>
   </param>
   <button bottom="20" buttontype="push" height="50" left="720" name="CLEAR CHAT" style="size:16;" width="240">
      <task tasktype="ogscript">params.setAllValues('chatMaster', ['']);</task>
   </button>
</abs>