X

The Visual Builder Cloud Service Blog

  • September 28, 2018

Advanced Capabilities for the Table Components in Visual Builder - Tips

Shay Shmeltzer
Director of Product Management - Oracle

In this blog we'll show you how to turn-on some more advanced capabilities in table components you add to your web pages in Visual Builder Cloud Service. Specifically we'll cover, column content formatting, column resizing & reordering, line wrapping, scroll policies, and adding more columns.

Column manipulations in a table

One thing that is worth mentioning first is that our UI gurus are not fans of tables. In general, they would recommend you'll use the list component to show collections of records. It's not just us, if you look at the UI of your facebook, twitter, instagram and even amazon product search results - all of those are not displayed as table - they show up as lists. So before you go down the table route - consider whether using lists will get you the functionality you need.

If you picked up a table component, then after you used the initial quick start to bind data to it, there are a set of table and column attributes that you can use to add functionality to your table. See the following video to learn how to:

  • Turn on Grid look and feel
  • Reformat columns content to show in different ways (dates, pictures, gauges)
  • Turn on column drag-and-drop reordering 
  • Allow resizing columns
  • Line-wrap long content in a column
  • Control fetch size and data loading
  • Add missing columns after you already ran the quick start
  • Add row level actions 

In the video I'm using the following values for the following attributes:

Attribute Value
column style white-space:normal
column resizable enabled
table scroll-policy-options {"fetchSize":3}

 

You can learn more about the table components in the JET cookbook section for the table component. And if you are interested in even more advanced capabilities you might want to check out this blog about creating editable tables in VBCS.

Join the discussion

Comments ( 3 )
  • Priyadarsini Thursday, January 17, 2019
    Thank you for the informative post. I was looking for few of the features that you have shown here.
  • Gunther Thielemannn Friday, April 19, 2019
    I sounds pretty simple. But I can't find the "current" in the page variables. I see only the SDP, but not data of the current row. Has this changed in the actual VBCS version? I assume I have now to create an Array Data Provider or is there an other way to access the data and populate a text input or an avatar?
  • Shay Shmeltzer Friday, April 19, 2019
    Gunther - I'm not exactly sure what you mean - the current is there by default.
    I would suggest you'll ask your question on our forum (with a bit more details on what you are trying to achieve) : https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha