To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:

Getting the most out of the WebList

Lesson 1 - Row Layout

There are a few things you can do to customize the row layout of the weblist:

  • The first is setting pbNewLine on the column. Setting this to true will result in the current column and all the columns after showing in a new line
  • Set piListColSpan or piListRowSpan to enlarge the column to span out to more columns or rows
  • Set pre-defined css for the weblist “MobileList” that styles the list to make it more appealing when used in a mobile drill-down select view
  • Use some pre-defined css for the columns like the “RowCaption” or “RowDetail”
  • When a column has data that is too large to show. You could use peWordBreak to either cut-off text with 3 dots, or (pre)wrap text so that lines will be broken at the end and start over at the beginning
  • Setting pbFixedWidth will result in the piWidth, which is set for each column, to be used as a fixed size instead of a ratio
  • Setting peAlign will align the value of the column

Now let’s show you how you use these properties on the weblist.


  • I have already setup a new workspace. With the tables and data from the WebOrderMobile example
  • I have setup a new select view with only a weblist in it. Let’s start by adding the Customer Data Dictionary using the DDO Explorer panel
  • Now I am going to add a few columns to show more information about the customer in the list
  • This looks just like a standard list
  • Now let’s start by adding the pbNewLine to the address column
  • As you can see the Customer Name column is only using 1 column
  • Now set the piListColSpan to 4 on the Customer Name column. And now it will take up all 4 columns of the list
  • Now I am going to add an extra column in between the customer name and the address. That will show you the comments of the customer. And set the piListRowSpan to 2. This will use up 2 rows to show the data

  • To style the row even more I am going to add the MobileList css class to the weblist
  • As you can see there is less spacing between the columns
  • Now Let’s add the RowCaption css to the Customer Name column and the RowDetail to the other columns
  • Now you can see that the Customer Name is a little bigger. And the other columns are smaller and have a different color. As you can see the Comments column is not showing all data from some of the columns
  • Let's add peWordBreak with wbWrap to the comment’s column
  • Now all the data from the column is shown
  • Now let’s add pbFixedWidth to all columns. And set the piWidth of Customer name to 325, Comments to 200, Address to 200, State to 25
  • Now it will show the columns to the size you set them to
  • At last lets set peAlign of State and City to alignCenter as this will now align in the center of the column

Alright now let’s go to the next lesson where I will show you the Expandable panel.