Customizing Mobile Table Elements
You can customize the rows and columns of a standard table or a custom one that you create. You can modify column settings and row click events for the following page element types for tables: Data Table, Search Grid, Transfer Table. For Data Table element types, you can set up a toggle that enables you to control visibility on the mobile page. For Transfer Table element types, you can add buttons that appear at the table’s footer. You can enable these optional settings based on your table requirements.
To customize page elements for tables:
-
Create a table or access an existing data table element.
For instructions, see Customizing Mobile Page Elements.
-
On the Mobile - Page Element page, you can customize table element settings through the following fields:
-
Row Size – Enter the number of rows you want the table to show for each load.
The number you specify replaces the default size of 10 rows shown by the table at the initial load. On the mobile page, you can tap a button to load the next set of rows, following the same row size.
-
Message – Enter the text for the message you want to show when no data or records can be found for the table.
-
Server-side Pagination – If you want to implement server-side pagination, check this box.
When you check this box, searching and sorting of columns are also done on the server side.
-
Cache Table Data on Back Navigation - If you want to cache table data when you navigate back to a previous mobile page, check this box.
You can enable this setting for a table on a mobile page that has a Back Button element. If you create your own page, make sure you add a Back Button element type that navigates to the previous page. See Customizing Mobile Page Elements.
-
Retain Column Filters - If you want to retain the filters that you select for a table on a mobile page, check this box.
By default, changes that you apply to table filters on a page are automatically removed when you leave the page. When you check this box, the table filters you apply remain throughout the active session. Your filters are retained even when you navigate to another mobile page within the process.
-
-
To set up a toggle for Data Table element types, select values in the following fields:
-
Toggle State – Select one of the following toggle states that you want to set as the default: Show or Hide.
The appropriate toggle icon for the state appears on the mobile page. If you do not specify a state, the toggle appears in the default Hide state and its icon.
-
Toggle Label – Select or create a label that shows on the mobile page for the toggle.
The label appears to the right of the toggle icon.
Data Table element types that do not have a toggle appear automatically during the initial page load. When you fill out at least one of these toggle fields, you add a toggle to the table. You can choose to set up toggles for tables that provide additional or optional data.
-
-
To modify search settings for Search Grid element types, enter values in the following fields:
-
Search Character Count – Enter the minimum number of characters that must be entered in the search field to start the search operation.
-
Search Delay – Enter the number of seconds after which search results are displayed, when you have reached the search character count.
Standard search grids display results after you enter at least three characters with a one–second delay. You can customize the settings depending on the size of the data and other such factors.
-
-
To customize table components, like rows and columns, see the following topics:
The following topics apply only to custom table elements that you create: Data Sourcing for New Table Elements and Setting Up Columns for New Tables.
To set up new columns for standard tables, see Adding Columns to Table Elements.
-
Click Save.
-
After you complete your mobile process customizations, make sure you update the app. See Compiling Mobile Customizations.
Data Sourcing for New Table Elements
When you create your own table element, you can use a saved search for your data source. If you want to access multiple data sources, you can use a RESTlet instead. The data retrieved from your source is stored in a state object. From the retrieved data, choose the columns you want to show in the table or grid.
Do not change the source data of standard table elements. It may cause issues to the standard mobile process flow.
On the Mobile - Page Element page, you can set up the data source for your table element in the On Load Action field. In this field, select or create the mobile action that retrieves the data during the initial page element load. Depending on the data source, you can set up a Restlet or Saved Search type of action. For more information, see Mobile Actions for Page Element Events.
After you set up the data source for your new table, you can set up mobile actions for row clicks, column clicks, or both. See the following topics:
Customizing Row Selection
On the Mobile - Page Element page, you can customize row selection depending on the element type.
For Data Table and Search Grid element types, in the On Row Click Action field, you can select or create the mobile action called when you tap a row. Standard table elements call a Forward Form or Submit Form type of action when you tap a row. It enables you to skip the step of tapping a button to navigate to the next page and save or submit data. In your custom process, you can set up the appropriate type of action based on the location of the mobile page in the process flow.
For Data Table element types, you can override the row click event to let you select multiple rows, by doing the following:
-
Select Multiple Rows – If you want to enable multiple row selection, check this box.
On the mobile page, the table displays a column of checkboxes. Instead of tapping a row, you can tap the box for each row that you want to select.
When you check this box, you can also set up one or more columns as row filters. See Setting Up Columns for New Tables.
-
Table Title Placeholder – (Optional) If you check the Select Multiple Rows box, the table displays the following text at the header: Number of rows selected: <#>. To further describe the rows, you can insert text or select a record type or transaction type.
For example, if you enter or select sales order, the text at the header becomes Number of sales order rows selected: <#>.
For Transfer Table element types, you can specify the mobile action for the left and right tables in the following fields:
-
On Click Action for Left Row – Select or create the mobile action called when you tap a row from the left table.
-
On Click Action for Right Row – Select or create the mobile action called when you tap a row from the right table.
In the standard transfer tables for Ship Central, when you tap a row for an item in the left table, it moves to the right table. The opposite behavior occurs when you tap a row in the right table. These behaviors indicate that you have either packed an item from the left table or unpacked one from the right table.
For more information about setting up mobile actions, see Customizing Mobile Actions.
For table columns, you can set up an action that is called when you tap data or a row in a specific column. See Setting Up Columns for New Tables.
Setting Up Columns for New Tables
On the Mobile - Page Element page, you can click the Table Columns subtab to add or edit columns. From this subtab, you can access the Mobile - Table Columns page and fill out the following fields for each column that you want to set up.
If you want to add columns to standard tables, see Adding Columns to Table Elements.
-
Name – Enter a unique name for the column.
-
Label – Enter the column’s label, which appears on the mobile page.
-
Data Type – Select the type of data you want to show in the column.
You cannot select the Password data type for columns.
-
Display Order – Enter the number that indicates the column’s position, with regard to other columns in the table.
For example, you want to display three columns on the table. Starting with number 1 for the first and leftmost column, assign the display orders to the columns accordingly.
-
Is Visible by Default – If you want this column to appear on the table during page loads, check this box.
-
Visibility Condition – If you want this column to appear based on a condition, you can enter an expression that evaluates to true or false.
When a condition evaluates to false, the column is hidden from the table. You cannot use the table configuration tool to display columns that are hidden based on a condition.
For more information about setting up visibility conditions, see Page Element Visibility and Loading.
-
Include in Group Filter – If you check the Select Multiple Rows box, you can check this box to assign this column as a row filter.
NetSuite applies this column’s data for the selected row as a filter. It removes the rows from the table that do not contain the same column data. Row filters automatically appear above the table element when you select a row. You can set up multiple columns as row filters.
For example, you have a table of item with an Item Name column that you have set up as a row filter. When you select a row with the Item A name, NetSuite adjusts the table to show only the rows that have the same item name.
-
On Click Action – Select or create the mobile action called when you click a cell in this column.
Note:You can use the same action for row and column clicks. If you check the Select Multiple Rows box, NetSuite overrides the mobile action that you set up in this field. For more information, see Customizing Row Selection.
-
Response Key – If you set up the On Click Action, you can enter the response key that contains the data for this column.
-
Show Column Data as Buttons – If you set up the On Click Action for this column and you want the column data to appear as buttons, check this box.
Each column cell appears as a button with its data as the button’s label. If you do not check this box, the data in each cell appear as underlined blue links.