By implementing these best practices, you can create a web app that prioritizes user convenience, respects their preferences, and offers a seamless and enjoyable experience. Prioritizing these details will ensure users have an intuitive, efficient, and frustration-free interaction with your app.
These are some general tips for a VBCS developer to make changes in VBCS application before migrating to different instances. Use connections based on backend. Instead of directly using a URL, This way, when we migrate from one instance to another, we can make changes in backend URL and credentials. This will be one-time setup… Make VBCS application migration easier
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:
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
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
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… Format dates in VBCS page using functions
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… How to have different colors on rows based on one field in row 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… How to enable resize 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… How to refresh particular cell in oj-data-grid
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… Calling Rest API using JavaScript function in vbcs