Search these areas:
Help
Support Forums
Product Info



-Introduction
-DataWeb: What's New
-Creating an Application
-The DataWeb Designer
-Application Management
-Data Tables
-Data Tables
-Views
-Templates
-Components
-Data Analysis
-Members
-Security
-Importing
-Exporting
-FTP
-JavaScript
-Object Model
-Full-Text Search
-Domain and Email Hosting
-HotBlock Modules
-Account Management
-Glossary
-New Responsive UI Module





DataWeb Help
Support Forums
Tutorial
Script Library
Knowledge Base

Home > Support

Script Library

  Side by side layout using <table> in a view (V2)
 
  chubbard posted this script:
  (Not strictly a script, but it took me a while to work this out and its handy to have the following to copy-paste...)

With more than a few fields, the update/insert/details view gets too long and so its nice to be able to put fields side by side. There's various tricks you can use to do this, but I've found that V2 makes it especially easy to do the following:

1) create the view with the dataregion and the fields you want
2) go to "Source" on the view and look for the lines:

  <ws:dataregion actionbarposition="bottom" jumpbarposition="top" displaymodes="grid,details,update" defaultmode="grid"><ws:datasource src="AddressBook" /><ws:caption>AddressBook</ws:caption>

at the beginning of the dataregion. Below will be a <ws:fieldbox> and the fields you selected.

3) Paste the following code immediately below the above code (i.e. between the </ws:caption and the <ws:fieldbox>):

<table>
<tr>
<td>
<ws:fieldbox>
</ws:fieldbox>
</td>
<td>
<ws:fieldbox>
</ws:fieldbox>
</td>
</tr>
<tr>
<td>
<ws:fieldbox>
</ws:fieldbox>
</td>
<td>
<ws:fieldbox>
</ws:fieldbox>
</td>
</tr>
</table>

4) Save, then go back Design mode.
5) If your default for this view is Grid, click on the Update tab to switch modes
6) Now you'll four boxes labelled "Empty Field Box" and all your fields below.

You're all set to make your layout really usable. Simply drag each field into the appropriate "empty field box". When you see a narrow horizontal line at the appropriate destination, release the drag.

Related tips:
+ tab order will be: all fields in a box, then the box to the right, then down to the leftmost box. I.e., pretty much what you'd expect/want.
+ use  <table border="1" rules="rows" frame="box"> (or variations on that) to get horizontal lines that correspond nicely to the resulting tab order (note: displays differently in NS)
+ drag the bottom field first - its easier to place new dragged boxes above an existing box
+ you can add more / less columns per usual <table> rules. Put a <ws:fieldbox> inside each <td> before adding fields
+ click on the top field in a fieldbox then use the Insert->HTML menu to add a heading. Handy for grouping fields (e.g. Business address and Home address field blocks)
+ to change the captions to normal text instead of bold (may be better if you have lots of fields as the captions can be overwhelming), insert the following before the </head> tag in source view:

<style type="text/css"><!--
.ws-detailcaption {font-weight: normal}
--></style>

Hope someone else finds this useful!
 
  on 2001-08-06 14:04:04, chubbard responded:
  One more tip:

At the very bottom of the screen in design mode, there's a little "crumb trail" that looks something like:

<html> <body> <ws:dataregion> <table> <tr> <td> <ws:fieldbox> <ws:field>

If you're having trouble clicking on a specific item to drag or set properties, you can also click on any of those tags to set its focus.

In particular, if you click on the <td>, <tr> or <table>, the right-hand side properties section will show a great little overview of the table with the appropriate element highlighted. VERY handy if you've got a complex table.
 
  on 2001-08-09 05:01:02, chubbard responded:
  This looks like it should accomplish precisely what I was trying to figure out how to do, however, I have pasted this code a few times and the system seems to ignore the table section of code. 

No boxes are displayed and even the legend at the bottom of the page does not indicate the <table> <tr> <td> sections.
 
  on 2001-08-09 05:15:40, chubbard responded:
  I just figured out what I was doing wrong.  It isn't until you have changed to the update mode that the empty field boxes are displayed and the legend at the bottom of the screen.

I think this is going to be an extremely useful tool.
 
  on 2001-08-09 11:57:59, chubbard responded:
  Thanks. Yes I tripped over that same thing too a couple of times so I mentioned it in step (5) above, but its still easy to miss.

Glad you've found this useful!
 
  on 2001-08-09 19:41:58, chubbard responded:
  Mike - this works very well, most of the time. I think I've pinpointed a small *bug*. Dropping and dragging existing fields into the fieldbox works perfectly. However, there are instances where I want to use substitution syntax, so I do Insert-HTML into a line in the fieldbox.

Replicating the *bug* seems to be predicated on which field I have highlighted prior to doing the Insert command. If I have a bound field or a calculated field highlighted, doesn't seem to be a problem in having the HTML get inserted without a hitch into a cell of its own. However, if my cursor is highlighted on another HTML "cell" within the fieldbox already, it seems to jam it in next to the existing HTML, on the same line.

At least this is the behavior I'm experiencing.

Hope this helps.

I think V2.1 or somewhere soon should enable inserting of tables with or without fieldboxes directly from the Insert menu.

Cheers,

Scott
 
  on 2001-08-26 17:03:30, chubbard responded:
  It proved to be exactly what I needed, provided
you just use the GUI to get the coding for the different fields, "one field per fieldbox", and then go into the source code to actually set up the tables it works much better. 

I have one page where I have set up multiple tables using the concept of 1 field per field box and you can even use action buttons in a fieldbox. 

If I want slightly spacing for a row, I simply create a different table.  I have one page that has 22 fields, 4 tables:
table 1: 2 rows 1 field per row.
Table 2: 4 rows, 2 field boxes per row.
Table 3: 2 rows, 5 field boxes per row
Table 4: 1 row, 4 field boxes per row.

There are a combination of drop-down selection fields referencing database fields and fixed values, calculated fields and data entry fields. 

Then go into source to manipulate <tables> <td><tr> and 1 field only per field box.

The only limitation I have found is that I have been unable to have two columns side-by-side and be able to tab down vertical one column and then tab down the next column, basically the navigation is horizontally, of course, you only have one column.
 
Affiliate | Partner | Terms of Use | Privacy Policy | Contact Us | Pricing | Bring DataWeb In-House    
DataWeb, 720 North 10th Street, A #145, Renton, Washington 98057 *425-583-5970* Fax 484-770-4706* Email Us