VBCS

How to Build User-Friendly Web Apps

khalil — Mon, 18 Nov 2024 16:15:31 +0000

Enable Easy Bookmarking
- When offering search functionality, provide users with an option to bookmark the URL dynamically.
  - This helps users return directly to their previous search or specific page, enhancing usability.
  - Example: After searching for “Vehicle XYZ,” update the URL to khalil232.com/someapp/search?query=Vehicle+XYZ so users can bookmark it for quick access.
Support Deep Linking
- Allow users to navigate directly to specific sections or data within your application using deep links.
- For instance, if your app has a “Search Vehicle” and “View Vehicle Details” feature, create links like khalil232.com/someapp/vehicle/12345 where 12345 is the vehicle ID.
- This lets users quickly return to the exact item or section they need, saving time and effort.
Respect User Actions
- Do not hijack cut, copy, or paste functionality: Users should be free to interact with text in your app. Restricting these basic actions can lead to frustration, particularly for tasks like copying transaction IDs or pasting search terms.
- Avoid disabling right-click or text selection: Users often rely on right-click or text selection for browser features (like “Inspect”) or to select and share information. Disabling these options can hinder user experience.
Reduce Blocking Actions
- Avoid full-screen blocking overlays during loading or processing. Instead, implement non-blocking alternatives:
  - Background Processes: Let processes like downloading large files or generating reports run in the background.
  - Interactive Screens: Allow users to continue interacting with the app while background tasks are running.
  - Completion Notifications: Use a popup, toast message, or notification to inform users when the process is complete.
  - Example: While generating a complex report, allow users to browse other parts of the application. When the report is ready, show a message or button to download it.
Make Links Different from Normal Text
- Ensure that links are visually distinct from other text. This can be achieved by using a different color, underlining them, or adding an icon. This makes it clear that the text is interactive and improves the navigation experience.
Confirm Difficult Actions
- Always prompt users with a confirmation dialog for actions that are irreversible or difficult to undo, such as deleting a record. A simple “Are you sure?” prompt, along with an explanation of the consequences, can prevent unintended mistakes.
- Example: “This action will permanently delete your record. Do you wish to continue?”
- This extra layer of confirmation reassures users and reduces the risk of accidental deletions.
Manage Text Lengths in Tables or Lists
- Consider how text will vary in length when designing tables or lists. Set reasonable character limits for data input or display. You can also implement features like text truncation with “Read More” buttons for longer content.
- Additionally, use tooltips or modals to display extra information when a user hovers over or clicks on a specific entry. This ensures that long or short text doesn’t break the layout, and users can still access all the information.
Provide File Upload Previews
- If your web app allows users to upload files, provide a preview of the file before they submit it. Include the file name, file size, and file type for full transparency. Offering a cancel option after previewing the file will also give users flexibility if they change their mind.
- For example, if a user uploads the wrong file, they should be able to cancel or replace it without any issues.

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.

Make VBCS application migration easier

khalil — Fri, 02 Aug 2024 18:32:38 +0000

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 when me get a new instance and at code level, we don’t have to make many changes

Get Application URL using JS function

For any kind of link to different VBCS application, use JavaScript code to get application URL using

$application.path
// design url -- {{vbcs-cloud-url}}/ic/builder/design/khalil/1.0.0/preview/webApps/demo/
// live url -- {{vbcs-cloud-url}}/ic/builder/rt/khalil/live/webApps/demo/

Get SaaS URL using JS function

For any kind of link to different ERP instance for any deep link or report link to get the host name of SaaS application, configure the SaaS application as one of the backend and configure a get API

Using the get API, we can use the below JavaScript code to get full URL of API, from which we can extract the exact host name

Code sample for getting SaaS URL using Rest Helper

{ "use strict"; class PageModule { async getSaaSURL(arg1, arg2) { let apiURL = await Rest.get("jsonplaceholderTypicodeCom/getUsers").toUrl(); // jsonplaceholderTypicodeCom --> this is service name // you can find this under Service Connections --> Overview --> Connection name // getUsers --> this is endpoint name // in above tab --> select endpoint and This is endpoint id let hostName = new URL(apiURL).origin; console.log(apiURL); // https://jsonplaceholder.typicode.com/users console.log(hostName); // https://jsonplaceholder.typicode.com/ } } return PageModule; }); " style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

define(["vb/helpers/rest"], (Rest) => {
  "use strict";

  class PageModule {
    async getSaaSURL(arg1, arg2) {

      let apiURL = await Rest.get("jsonplaceholderTypicodeCom/getUsers").toUrl();

      // jsonplaceholderTypicodeCom --> this is service name
      // you can find this under Service Connections --> Overview --> Connection name 

      // getUsers --> this is endpoint name 
      // in above tab --> select endpoint and This is endpoint id 
      
      let hostName = new URL(apiURL).origin;

      console.log(apiURL); // https://jsonplaceholder.typicode.com/users
      console.log(hostName); // https://jsonplaceholder.typicode.com/
    }
  }

  return PageModule;
});

Use messages or static status like APPROVED, DONE, or some ID like -1, 0, 1, or 2024 using a constant value at the application level.

This will help to easily see all the values at one time and later, if there is change in actual value, we can change the value at this place with no need to change the code.

{
  "id": "demo",
  "description": "A new VB app",
  "defaultPage": "shell",
  "constants": {
    "SUCCESS_STATUS": {
      "type": "string",
      "defaultValue": "Successfully Created"
    }
  }
}

{ "use strict"; class PageModule { async checkStatus(status, APP_SUCCESS_STATUS) { // pass $application.constants.SUCCESS_STATUS return ( status === APP_SUCCESS_STATUS ) } } return PageModule; }); " style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

define(["vb/helpers/rest"], (Rest) => {
  "use strict";

  class PageModule {
    async checkStatus(status, APP_SUCCESS_STATUS) {
     // pass $application.constants.SUCCESS_STATUS
      return ( status === APP_SUCCESS_STATUS )
    }
  }

  return PageModule;
});

How to learn VBCS as beginner

khalil — Tue, 16 Jul 2024 18:14:48 +0000

General approach and topics to learn in VBCS

Basics of VBCS
- What is VBCS?
- Why is it used?
What are application, page, and flow scopes?
- Which scope is used when
- Identifying default flow / default page
How to connect to other systems
- Using service connections
  - OIC-related connections: call an integration on a button and click from VBCS page
  - SaaS-related connections: call some fusion API on button click and populate in a table
  - Some direct APIs — call some external API to other than OIC or SaaS API
- In Service connections, understand different type of authentication methods, like basic authentication / OAuth.
- Try to call REST APIs with different types of http methods ( GET, POST, PUT, PATCH, DELETE )
How to store data
- Import and export data from business object using inbuilt data manager
- Create business objects with different types of fields
  - generated id
  - number field
  - string field
  - date field
  - calculate field
- how to write business rules and inside we can write Groovy, and this can be called using API
- Write some validations using business object trigger (like the salary of person cannot be < 200 ) or (start date should always be less than end date)
- Understanding how data is stored in development, stage and live applications.
- Understanding how to copy data (from development to stage) or (from stage to live)
Different status of application:
- Development, Stage and Live mode
- Understanding when to use which one to use when
- Generally, when working on application, it will be in Development mode
- When we want to test the application or if we want to share the application, we can stage and share the URL, or we can publish the application and share the live URL.
Understanding different components
- form-layout
- oj-input-text
- oj-bind-text
- oj-input-date
- oj-select-single
- oj-table
- template
- oj-bind-if
- oj-for-each
Understanding actions in Action chain
- assign variable ( create a variable and assign it using action chain and display using text field )
- show notification (e.g.: show some message on button click using fire notification action )
- call component ( e.g.: open dialog / close dialog )
- call JS function ( e.g.: create a JS function to find sum of two numbers)
- if else ( use some condition to show different messages )
- call rest api ( get / post )
- navigation ( e.g.: navigate to different page on link click )
- open URL (e.g.: on link-click, open some external site like google.com )
Understanding variables and types
- How to create variables
- How to create types
- How to create types using service endpoints
- What is ADP ( Array Data Provider)?
- What is SDP ( Service Data Provider)?
- Understand scope of variables ( application, flow and page )
Events and Event listeners
File structure -> Import/Export code -> Show file structure in Explorer.
Roles and Security
Custom styling using app.css / default themes
Deploying applications from one instance to another.

Resources

Official documentation: https://docs.oracle.com/en/cloud/paas/app-builder-cloud/index.html

VBCS cookbook: https://vbcookbook.oracle.com/ It has a lot of examples where you can download the sample code, import it into an application and modify it according to your needs

Customer Connect for visual builder: https://community.oracle.com/customerconnect/categories/oci-visual-builder-studio Great place to ask or find questions when you get stuck

JET Cookbook: https://www.oracle.com/webfolder/technetwork/jet/jetcookbook.html — There is a lot of documentation of JET components and example, we can check the code from here, tweak it and use in VBCS applications

JS docs: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html — JS documents for jet components can be navigated using left navigation bar to find JS documents for other components

Linkedin group: https://www.linkedin.com/groups/13630219/

Youtube Videos which I found

Visual Builder: A Crash Course from Oracle Developers — https://www.youtube.com/watch?v=9DNBAh0UTeY

Visual Builder Playlist: https://www.youtube.com/playlist?list=PL3X62LScvI_K1Glab5N9Dvwcervel5e4R

Youtube channels that post content about VBCS and OIC

Shay: https://www.youtube.com/@ShayOracle

Oracle Developers Channel: https://www.youtube.com/channel/UCdDhYMT2USoLdh4SZIsu_1g

Beenum learning: https://www.youtube.com/@BEENUMLEARNING

Techsupper Ankur: https://www.youtube.com/@TechSupper

To upload csv data as ADP(Array data provider) or array

khalil — Mon, 29 Apr 2024 19:16:42 +0000

Steps to upload csv data as ADP(Array data provider) or array

Add a file component
On file select call the below JavaScript function and pass file as parameter
Assign the result from below function to ADP.data or Array

JavaScript function

PageModule.prototype.getRowsFromCsv = function (file) {
  return new Promise((resolve) => {
    try {
      let fileContent = [];
      const fileReader = new FileReader();
      fileReader.readAsText(file);
      fileReader.onload = (e) => {
        let result = e.target.result;
        let columns = ['employee','name','phone','salary'];
        let size;
        let inputData = [];
        if (result) {
          let lines = result.split("\n");
          for ( let  i = 1 ; i < lines.length ; i++ ) {
            let row = lines[i];
            let rowArray = row.split(",");
            let inputObj = {} ;
            inputObj.employee = rowArray[0];
            inputObj.name = rowArray[1];
            inputObj.phone = rowArray[2];
            inputObj.salary= rowArray[3];
            inputData.push(inputObj);
          }
          resolve({
            success: true,
            inputData: inputData,
            error: ""
          });
        } else {
          resolve({
            success: false,
            inputData: [],
            error: "Empty File : " + result
          });
        }
      };
    } catch (err) {
      resolve({
        success: false,
        inputData: [],
        error: "Error while reading file : " + err.detail
      });
    }
  });
};

Sample CSV data that will work with this code

employee,name,phone,salary
1,khalil,123,3000
2,ahmed,345,4000
3,sayeed,929,25000

Sample file picker html code

file-picker sample code

" style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<div class="oj-sm-padding-0 oj-md-padding-4x">
    <h4>file-picker sample codeh4>

    <oj-file-picker on-oj-select="[[ fileSelectListener ]]">

    oj-file-picker>


    <oj-table class="custom-table" id="employeetable" scroll-policy="loadMoreOnScroll"
        class="oj-flex-item oj-sm-12 oj-md-12" data="[[ employeeADP ]]" columns='[
    {"headerText":"employee","field":"employee"},
    {"headerText":"name","field":"name"},
    {"headerText":"phone","field":"phone"},
    {"headerText":"salary","field":"salary"}
    ]'>
    oj-table>

div>

Sample working code — iframe

Link to live demo — file-picker

Format dates in VBCS page using functions

khalil — Wed, 17 Jan 2024 20:20:18 +0000

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 function will add necessary formatting to the date and return the value as string.

Live code preview

We can use date convertor functions to format the date in required format

JavaScript function

{ "use strict"; class PageModule { convertDateToStr(customDate) { let dateConvertor = new datetimeConverter.IntlDateTimeConverter({ pattern: "dd-MMM-yyyy", }); return dateConvertor.format(customDate); } } return PageModule; }); " style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

define(["ojs/ojconverter-datetime"], (datetimeConverter) => {
  "use strict";

  class PageModule {
    convertDateToStr(customDate) {
        let dateConvertor = new datetimeConverter.IntlDateTimeConverter({
          pattern: "dd-MMM-yyyy",
        });
      return dateConvertor.format(customDate);
    }
  }

  return PageModule;
});

Patterns examples

Patterns	Input – date string	Output – formatted date
dd-MMM-yyyy	2024-01-18T13:59:23+05:30	18-Jan-2024
dd-MM-yyyy	2024-01-18T13:59:23+05:30	18-01-2024
MM/dd/yyyy	2024-01-18T13:59:23+05:30	01/18/2024
MM/dd/yyyy hh:mm:ss	2024-01-18T13:59:23+05:30	01/18/2024 01:59:23
MM/dd/yyyy hh:mm:ss a	2024-01-18T13:59:23+05:30	01/18/2024 01:59:23 PM

References –

jsDoc for IntlDateTimeConverter ( to view all convertor options )

https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.IntlDateTimeConverter.html

Live application URL ( to try out few configs )

https://khalil232.com/apps/ojet-apps/?ojr=date-format-sample

How to have different colors on rows based on one field in row in oj-data-grid

khalil — Mon, 04 Dec 2023 19:10:44 +0000

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 we want show different style for different rows, like

If we want to highlight top performer in a data set,
or differently show calculated fields
or if we want to show different type with a different color

Sample HTML code:

Data grid

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 ">
    <h5>Data gridh5>
    <oj-data-grid id="datagrid" style="width:100%;height:400px" aria-label="My Data Grid" 
      data='{{ salaryDataADP }}'
      header.column.style="[[ headerColStyle ]]" header.column.resizable.width="enable"
      header.column.resizable.height="enable" header.row.resizable.width="enable"     
      header.row.resizable.height="enable"
      header.column.class-name="oj-helper-justify-content-flex-start" 
      cell.class-name="[[ cellClassNameFunc ]]"
      cell.style="width: 200px;">     
    oj-data-grid>
  div>
div>

Sample JS code:

x.id === key); if (rowData.city === "Delhi" || rowData.city === "Banglore") { classNameStr += "oj-bg-success-10 oj-text-color-success"; } else if (rowData.city === "Hyderabad" || rowData.city === "Kolkata") { classNameStr += "oj-bg-danger-30 oj-text-color-danger"; } else if (rowData.city === "Mumbai" || rowData.city === "Nagpur") { classNameStr += "oj-bg-warning-30 oj-text-color-warning"; } cellContext.datasource[cellRowIndex]; return classNameStr; };" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

this.cellClassNameFunc = function (cellContext) {
  let cellRowIndex = cellContext.indexes.row;
  let classNameStr = "oj-helper-justify-content ";
  
  // to do styling based on index 
  // if (cellRowIndex % 3 === 0) {
  //   classNameStr += "oj-bg-success-10 oj-text-color-success";
  // } else if (cellRowIndex % 3 === 1) {
  //   classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  // } else {
  //   classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  // }
  
  let key = cellContext.key;
  console.log(cellContext);
  console.log(cellContext.datasource.data[cellRowIndex]);
  let rowData = cellContext.datasource.data.find((x) => x.id === key);
  if (rowData.city === "Delhi" || rowData.city === "Banglore") {
    classNameStr += "oj-bg-success-10 oj-text-color-success";
  } else if (rowData.city === "Hyderabad" || rowData.city === "Kolkata") {
    classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  } else if (rowData.city === "Mumbai" || rowData.city === "Nagpur") {
    classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  }
  
  cellContext.datasource[cellRowIndex];
  
  return classNameStr;
};

Screenshots

Choosing row background color and text color based on city

Choosing row background color and text color based on index

Live application URL ( row style based on city ): https://khalil232.com/apps/ojet-apps/?ojr=data-grid-example

References:

Datagrid js doc for identifying other attributes : https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html

CSS helpers used:

Background-color: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/BackgroundColor.html

Font color: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/Text.html

How to enable resize in oj-data-grid

khalil — Mon, 04 Dec 2023 18:32:09 +0000

We can enable resize in oj-data-grid by adding the following html code to :

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<oj-data-grid
  id="datagrid"
  style="width:100%;height:400px"
  aria-label="My Data Grid"
  data='{{ salaryDataADP }}'
  header.column.style="[[ headerColStyle ]]"
  header.column.resizable.width="enable"
  header.column.resizable.height="enable"
  header.row.resizable.width="enable"
  header.row.resizable.height="enable"
  header.column.class-name="oj-helper-justify-content-flex-start"
  cell.class-name="oj-helper-justify-content-flex-start"
>
  <oj-menu slot="contextMenu" aria-label="Employee Edit">
    <oj-option id="resizeWidth" value="Resize Width"
      data-oj-command="oj-datagrid-resizeWidth">oj-option>
    <oj-option id="resizeHeight" value="Resize Height"
      data-oj-command="oj-datagrid-resizeHeight">oj-option>
    <oj-option id="resizeFitToContent" value="Resize Fit To Content"
      data-oj-command="oj-datagrid-resizeFitToContent">oj-option>
  oj-menu>
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.

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<oj-data-grid
  header.column.resizable.width="enable"
  header.column.resizable.height="enable"
  header.row.resizable.width="enable"
  header.row.resizable.height="enable"
>
oj-data-grid>

To add an additional right-click menu, we can add the below code. The user can right-click and click on Resize width, and enter a desired width, like 100 or 200.

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<oj-menu slot="contextMenu" aria-label="Employee Edit">
    <oj-option id="resizeWidth" value="Resize Width"
      data-oj-command="oj-datagrid-resizeWidth">oj-option>
    <oj-option id="resizeHeight" value="Resize Height"
      data-oj-command="oj-datagrid-resizeHeight">oj-option>
    <oj-option id="resizeFitToContent" value="Resize Fit To Content"
      data-oj-command="oj-datagrid-resizeFitToContent">oj-option>
  oj-menu>

There are other commands available, like below ( see the jsdoc link for more information ). Few features are supported only in latest version of JET

Default Function	data-oj-command value
`Resize menu` (contains width and height resize)	oj-datagrid-resize
`Sort Row menu` (contains ascending and descending sort)	oj-datagrid-sortRow
`Sort Column menu` (contains ascending and descending sort)	oj-datagrid-sortCol
`Resize Width`	oj-datagrid-resizeWidth
`Resize Height`	oj-datagrid-resizeHeight
`Resize Fit To Content`	oj-datagrid-resizeFitToContent
`Sort Row Ascending`	oj-datagrid-sortRowAsc
`Sort Row Descending`	oj-datagrid-sortRowDsc
`Sort Column Ascending`	oj-datagrid-sortColAsc
`Sort Column Descending`	oj-datagrid-sortColDsc
`Cut (for reordering)`	oj-datagrid-cut
`Paste (for reordering)`	oj-datagrid-paste
`CutCells (for data transferring)`	oj-datagrid-cutCells
`CopyCells (for data transferring)`	oj-datagrid-copyCells
`PasteCells (for data transferring)`	oj-datagrid-pasteCells
`Fill`	oj-datagrid-fillCells
`Select Multiple Cells on Touch Device`	oj-datagrid-discontiguousSelection
`Freeze Columns`	oj-datagrid-freezeCol
`Freeze Rows`	oj-datagrid-freezeRow
`Unfreeze Columns`	oj-datagrid-unfreezeColumn
`Unfreeze Rows`	oj-datagrid-unfreezeRow
`Hide Columns`	oj-datagrid-hideCol
`Unhide Columns`	oj-datagrid-unhideCol

Screenshots

Live application URL: https://khalil232.com/apps/ojet-apps/?ojr=data-grid-example

References:

helper classes: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/Helpers.html

jet cookbook: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataGrid&demo=resizing

link for oj-data-commands: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html#contextmenu-section

How to refresh particular cell in oj-data-grid

khalil — Sun, 03 Dec 2023 19:57:12 +0000

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 value, we can use the following JavaScript code:

// "gridData" is a variable holding grid information. 
// We can pass "gridData" to the JS function and call the below code.

let updateEventDetails = {
"type": "update",
"detail": {
    "ranges": [{
            "rowOffset": 0,      // start of grid row
            "columnOffset": 0,   // start of grid col
            "rowCount":  gridData.counts.row // end of grid row
            "columnCount": gridData.counts.column // end of grid col 
       }]
    }
};
gridData.dispatchEvent(updateEventDetails);

The above code will refresh all the grid cells; if we want to refresh only a particular grid cell, we can set relative rowOffset, columnOffset, rowCount or columnCount.

We can also give multiple ranges if the cells cannot be captured in a single range.

When we use the refresh event on the grid, the grid becomes white and renders again. In order to avoid that, we use the update event. The update event doesn’t remove the focus, and only the cells in range will get refreshed.

If you have a huge amount of data in the grid, use the update event very rarely. It has a huge impact on performance. If you want a large number of cells to be refreshed, use the refresh event instead of the update event.

References:

Data Grid Cookbook: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataGrid&demo=overView

ojDataGrid JS doc: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html

DataGridProviderUpdateEvent: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/DataGridProviderUpdateEvent.html

Calling Rest API using JavaScript function in vbcs

khalil — Tue, 10 Oct 2023 17:56:43 +0000

We can call rest API configured in service connection using RestHelper

The function getLineItems() can be called using action chain.

{ "use strict"; class PageModule { getLineItems() { let endpointurl = "buinessObjects/getalls_Country"; let queryString = "id is not null"; return new Promise(function (resolve, reject) { var ep = Rest.get(endpointurl); ep.parameters({ q: queryString, onlyData: true, limit: 50, orderBy: "id:asc", }); ep.fetch().then(function (result) { if (result.response.ok) { resolve(result.body.items); } else { resolve([]); } }); }); } } return PageModule; });" style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

define(["vb/helpers/rest"], (Rest) => {
  "use strict";

  class PageModule {
    getLineItems() {
      let endpointurl = "buinessObjects/getalls_Country";
      let queryString = "id is not null";

      return new Promise(function (resolve, reject) {
        var ep = Rest.get(endpointurl);
        ep.parameters({
          q: queryString,
          onlyData: true,
          limit: 50,
          orderBy: "id:asc",
        });
        ep.fetch().then(function (result) {
          if (result.response.ok) {
            resolve(result.body.items);
          } else {
            resolve([]);
          }
        });
      });
    }
  }

  return PageModule;
});

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 can find the extension id from ->

Open workspace, click on extension name in left hand side
Go to settings and you will find extension id.

{ "use strict"; class PageModule { getLineItems() { let extensionId = "site_MyExtension" let endpointurl = "site_MyExtension:saasRestApi/getalls_Country"; let queryString = "id is not null"; return new Promise(function (resolve, reject) { var ep = Rest.get(endpointurl, { extensionId: "site_MyExtension" } ); ep.parameters({ q: queryString, onlyData: true, limit: 50, orderBy: "id:asc", }); ep.fetch().then(function (result) { if (result.response.ok) { resolve(result.body.items); } else { resolve([]); } }); }); } } return PageModule; });" style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

define(["vb/helpers/rest"], (Rest) => {
  "use strict";

  class PageModule {
    getLineItems() {
      let extensionId = "site_MyExtension"
    
      let endpointurl = "site_MyExtension:saasRestApi/getalls_Country";
      let queryString = "id is not null";
 
      return new Promise(function (resolve, reject) {
        var ep = Rest.get(endpointurl, { extensionId: "site_MyExtension" } );
        ep.parameters({
          q: queryString,
          onlyData: true,
          limit: 50,
          orderBy: "id:asc",
        });
        ep.fetch().then(function (result) {
          if (result.response.ok) {
            resolve(result.body.items);
          } else {
            resolve([]);
          }
        });
      });
    }
  }

  return PageModule;
});

How to handle large text in table or grid

khalil — Tue, 10 Oct 2023 17:40:30 +0000

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.

" style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<oj-table class="custom-table" 
  id="employeetable"
  scroll-policy="loadMoreOnScroll" 
  class="oj-flex-item oj-sm-12 oj-md-12"
  data="[[ employeeListADP ]]" 
  columns='[
            {"headerText":"Id","field":"id"},
            {"headerText":"Employee Number","field":"empNumber"},
            {"headerText":"Employee Name","field":"empName"},
            {"headerText":"Department Name","field":"departmentNumber"},
            {"headerText":"Address","field":"address"},
            {"headerText":"Address line","field":"addressLine2"}
        ]'>
  oj-table>

We can set for the column, so that it doesn’t expand.

e.g.: In this for Address we can give max-width as 200px

This will show the text up to 200px and later it is show as … This is similar to text-overflow: ellipsis; css code

" style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<oj-table class="custom-table" 
    id="employeetable"
    scroll-policy="loadMoreOnScroll"
    class="oj-flex-item oj-sm-12 oj-md-12"
    data="[[ employeeListADP ]]" 
    columns='[
      {"headerText":"Id","field":"id"},
      {"headerText":"Employee Number","field":"empNumber"},
      {"headerText":"Employee Name","field":"empName"},
      {"headerText":"Department Name","field":"departmentNumber"},
      {"headerText":"Address","field":"address","style": "max-width:200px"},
      {"headerText":"Address line","field":"addressLine2"}
    ]'>
oj-table>

We can try to wrap the text using oj-helper-overflow-wrap-anywhere oj-helper-white-space-normal classes

" style="color:#babed8;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<h5>Table with added width to Address columnh5>
<oj-table class="custom-table"  
    id="employeetable"  
    scroll-policy="loadMoreOnScroll" 
    class="oj-flex-item oj-sm-12 oj-md-12"
    data="[[ employeeListADP ]]" 
    columns='[
        {"headerText":"Id","field":"id"},
        {"headerText":"Employee Number","field":"empNumber"},
        {"headerText":"Employee Name","field":"empName"},
        {"headerText":"Department Name","field":"departmentNumber"},
        {  
            "headerText":"Address",
            "field":"address",
            "className": "oj-helper-overflow-wrap-anywhere oj-helper-white-space-normal"
        },
        {"headerText":"Address line","field":"addressLine2"}
    ]'>
oj-table>

Link to live application – https://khalil232.com/apps/ojet-apps/?ojr=table-long-text

Link for text-overflow: ellipsis – https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Link for oradocs for content wrap – https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=columnContentWrapping