How to learn VBCS as beginner
How to learn VBCS as beginner
Basics of VBCS
What are application, page, and flow scopes?
How to connect to other systems
How to store data
Different status of application:
Getting time difference from now
We can use the following javascript code to get the date difference in readable format e.g: Khalil posted a comment on ‘2024-05-10T01:25:14.317Z’ is less readable than Khalil posted a comment 7 hours ago. I have used the library (https://github.com/yairEO/relative-time) to achieve. Sample Code Code link github – https://github.com/khalilahmed232/khalilahmed232/tree/main/plain/date-time-ago Live Application: Live Application URL: https://khalil232.com/apps/plain/date-time-ago/index.html
To upload csv data as ADP(Array data provider) or array
Steps to upload csv data as ADP(Array data provider) or array JavaScript function Sample CSV data that will work with this code Sample file picker html code Sample working code — iframe Link to live demo — file-picker
Format dates in VBCS page using functions
You can use oj-input-date or oj-input-date-time components for showing formatted date and use convertor options But when using above component only for read-only purpose to show some values in grid or table, it doesn’t make sense to use input fields. Instead we can use oj-bind-text field and pass data using following JavaScript function. The JavaScript … Read more
How to have different colors on rows based on one field in row in oj-data-grid
On a data grid, we can use a function in the cell.class-name attribute to dynamically pass the class name based on row data. “cellContext” will contain the required information. We can use console.log() to identify the structure. This can be used for other attributes, like “header.column.class-name” as well on oj-data-grid This can be used when … Read more
How to enable resize in oj-data-grid
We can enable resize in oj-data-grid by adding the following html code to <oj-data-grid>: The following attributes on the header will allow resizing. When hovering on a border, the user can resize the row or column height or width. To add an additional right-click menu, we can add the below code. The user can right-click … Read more
How to refresh particular cell in oj-data-grid
We can use the update event to refresh particular grid cells. Let us say we are displaying a grid with few rows where the user can edit the data and we are showing few calculated fields (like total or percentage). If we have to refresh the grid cells after updating the cell with the correct … Read more
Calling Rest API using JavaScript function in vbcs
We can call rest API configured in service connection using RestHelper The function getLineItems() can be called using action chain. We can call the rest API configured in the service connection using Rest Helper in APP UI as well We have to additional pass extensionId – site_MyExtension. ( id of the APP UI extension. You … Read more
How to handle large text in table or grid
By default long text in table or data-grid will expand, showing all text in single line, that may not be very useful. Columns will get expanded and few columns which we want to show will be hidden. We can set for the column, so that it doesn’t expand. e.g.: In this for Address we can … Read more
When to use grid or table or for each in VBCS
While showing collections, we can use oj-table or oj-data-grid or we can use oj-for-each to display multiple values When we show some data which comes in API, and we don’t have to much grouping and all we can show as table If the data has few actions like approve or to update few columns like … Read more