Use Connectors in the App Designer

In this topic, you learn how to use a connector in the App Designer.

Using the Connectors in the App Designer offers users a range of choices for seamlessly integrating data sources into their applications.

Using the Connector component



  1. Open your application and search for Connector from the resource library.

  2. Place the component in Resources of the application tree.

  3. In Properties > connector, select your existing connector.

Ensure you rename the connector component to a logical name that reflects the data source.
  1. In a script, right-click.

    1. Choose Code Snippets.

    2. Expand Connectors > NameOfConnector.

      There you will find there the generated scripts for your connector, which are ready for use.

  2. Select a method.

    In this example, we will use the List method to fetch all the data and then bind the attributes to a sap.m.ComboBox containing a one sap.ui.core.Item.

  3. Select the List method and place it in a script.

  4. Remove the filter object key.

    // the name of our connector component is "connectData"
    async function listconnectData() {
        const options = {
            fields: [{
                    name: "name"
                    name: "text"
                    name: "image"
                    name: "updatedAt"
                    name: "createdAt"
                    name: "updatedBy"
                    name: "createdBy"
            order: {
                name: "DESC"
        const response = await connectData.list(options);
        modelComboBox.setData(response.result);  // set the model to the combobox
  5. Bind a field to the Properties > text of the sap.ui.core.Item.

    connector bindings


  • Your connector is used in the application and can be bound to components.

connector bindings combobox

Using the Extended System Connector bundle

With the Extended System Connector bundle, available in the Neptune DXP Marketplace, you now have the capability to create new connectors for the following:

  • SAP OData

  • SAP HANA Database

  • Salesforce

  • MS SQL Server

  • ServiceNow

  • Neptune DXP - Open Edition - System Tables



  1. In the App Designer, create a new application using the Full Screen Template.

    Result: You have created an application.

  2. Drag a Table component in the Page of the application.

  3. Drag the connector component and a JavaScript file in the application’s Resources.

    connector components
  4. In your Javascript file, right-click, open the Code Snippets, and under Custom, you will find the Neptune Connectors code snippets.

    connector code snippet overview
  5. Copy your Connector’s ID from the Connector tool.

    connector id
  6. Copy-paste the Constructor code snippet and replace the connector’s ID with your connector ID.

    connector paste ID
  7. Create an async function, paste the LIST code snippet, and set the data to your table (set the table’s Model Source to Generic Array).

    connector list snippet
  8. Paste the Pagination and Auto Column Sorting code snippet, and call the function.

    connector pagination sorting
  9. Right-click on your table, open the Wizard and define your fields.

    connector table wizard
  10. Save, Activate and Run the application:

    connector app overview


  • Your connector is used in the App Designer application.