E-Learning Community DXP Portal Support
Free Trial

Neptune DXP - Open Edition

    • Release notes
      • Neptune DXP - Open Edition 23.10.7
      • Neptune DXP - Open Edition 23.10.6
      • Neptune DXP - Open Edition 23.10.5
      • Neptune DXP - Open Edition 23.10.4
      • Neptune DXP - Open Edition 23.10.3
      • Neptune DXP - Open Edition 23.10.2
      • Neptune DXP - Open Edition 23.10.1
      • Neptune DXP - Open Edition 23.10.0
    • Overview
      • UI5 overview
      • Runtime environment
      • Comparing Neptune DXP - Open Edition and Neptune DXP - SAP Edition
      • Neptune DXP - Open Edition life cycle
      • Cockpit tool overview
      • Telemetry
      • Security overview
        • Security features overview
        • Load balancing
        • User authentication
        • Mobile client security
        • API authentication
        • Authentication and authorization
      • Third-Party Libraries
      • Design best practice
    • Installation
      • Overview
      • System requirements
      • Download link
      • Installation guide for Neptune DXP - Open Edition
      • Basic setup of Neptune DXP - Open Edition
      • Install npm modules
        • Use npm modules on a virtual machine
      • Configure your database
        • Microsoft SQL setup
          • Settings on SQL Server Management Studio and SQL Server Configuration Manager
          • Settings on Neptune DXP - Open Edition
      • Load balancing
      • Set up default ports in Windows
      • Install Neptune DXP - Open Edition on cloud platforms
        • Install Neptune DXP - Open Edition using Neptune DXP Cloud
        • Install Neptune DXP - Open Edition on SAP BTP
          • Set up a trial account
          • Set up a subaccount on the SAP Business Technology Platform
          • Enable Cloud Foundry
          • Create organizational spaces
          • Add a new quota plan
          • Connect your account
        • Install Neptune DXP - Open Edition on Amazon EC2
          • Create a key pair
          • Launch the AWS instance
          • Set up a database
          • Connect the AWS database
        • Install Neptune DXP - Open Edition on Microsoft Azure VM
          • Create a virtual machine
          • Connect to the virtual machine
          • Create an Azure Database
          • Configure a server-level firewall rule
          • Create a database schema
          • Connect the database
          • Further readings on Microsoft Azure and virtual machines
        • Install Neptune DXP - Open Edition on the Oracle Cloud Infrastructure
          • Check for Neptune DXP - Open Edition on Oracle Cloud Infrastructure
          • Install Neptune DXP - Open Edition into Oracle Cloud Infrastructure
          • Start Neptune DXP - Open Edition with tmux
        • Install Neptune DXP - Open Edition using Docker
        • Install Neptune DXP - Open Edition using Kubernetes
      • High-availability setup of Neptune DXP - Open Edition
      • Sizing guide
    • Cockpit
      • Overview
      • Cockpit settings
      • Cockpit search function
      • Cockpit perspectives
      • Cockpit tools
      • Naia
      • Development
        • Neptune DXP Marketplace
          • Upload an application building block
        • Development package
          • Add a new development package and integrate with Git
          • Import a development package from Git
          • Configure data exchange with GitHub
          • Send data to GitHub from a development package
          • Modify data in GitHub from a development package
          • Working on the same repository and merging changes
          • Delete a development package and its artifacts
        • Adaptive Designer
          • Adaptive Designer user interface at a glance
            • Shell bar
            • Side navigation
            • Data fields
            • Application tree
            • Preview
            • Settings/properties
            • Documentation search
          • Adaptive templates
            • Adaptive list
            • Adaptive edit
            • Analytic slice and dice
            • Adaptive calendar
            • Adaptive splitter/layout
            • Adaptive grid
            • Adaptive tile chart
            • Adaptive tile table
          • Data sources
            • Create an adaptive application based on a table definition
            • Create an adaptive application based on a server script
          • Adaptive applications templates and sources
            • Create a simple setup and a run script for a connector
            • Create an advance run script for a connector
            • Create a connector in the Adaptive Designer
        • App Builder
        • App Designer
          • App Designer user interface at a glance
            • Shell bar
            • Side navigation
            • Component library
              • App Designer resource components
            • Application tree
            • Preview
            • Component properties
          • Ways to create an application in Neptune DXP - Open Edition
            • Custom components
            • Create an application from scratch
              • Create general structure
              • Integrate data from an API
              • Add a footer with a button
            • Create an application with a template
              • Configure an application with a SplitApp template
              • Add resources to the master page
              • Create a list on the master page
            • Add a building block into the App Designer
            • Add custom HTML in the App Designer
            • Copy an app from an existing app
            • Import applications
            • Export applications
          • Configuration of an application
            • Application Settings
            • Language Translation
            • Version Management
          • Data models in the App Designer
        • App Editor
          • Getting started with the App Editor
          • App Editor user interface at a glance
          • Migrate applications to App Editor
          • Add npm modules to your project
          • Deploy App Editor application
          • App Editor Visual Studio Code extension
        • Script Editor
          • Overview of the Script Editor
          • Getting started with the Script Editor
          • Code snippets in the Script Editor
          • Add resources to a script
          • Run a script
          • Key words
        • Rules Engine
          • Set up a rule
          • Create attributes for the rule
          • Create a rule with conditions
          • Test your rule
          • Example use cases
          • Call a rule like an API in a script
        • Code snippets
          • Create a code snippet
        • Documentation
          • Create documentation for an application
          • Export a documentation artifact for an application
          • Import a documentation artifact
        • Media Library
          • Import files into the Media Library
          • Export files from the Media Library
        • npm Modules
          • Add npm modules
        • Application trashbin
          • Delete or restore an application from the Application Trashbin
      • Design
        • PDF Designer
          • PDF Designer elements
          • PDF Designer settings
          • Insert an interface to the PDF Designer
          • Create a new PDF template
          • Open a PDF template
          • Edit a PDF template
          • Download a PDF document
          • Export a PDF template
          • Import a PDF template
          • Generate a PDF via a script
          • Generate a PDF via an API
          • Create a PDF from scratch
        • Theme Designer
          • Add a new theme
          • Edit an existing theme
          • Delete a theme
        • Theme Import
          • Import a theme
          • Edit an imported theme
          • Delete an imported theme
        • Email Template
          • Create an email template
          • Email template code snippet
      • Connectivity
        • Connectivity Group
          • Create a group
        • API Designer
          • API Designer user interface
          • Create an external API with the API Designer
            • Configure an external API
            • Add an operation
            • Add definitions and properties
            • Add URL parameters in API operations
          • Create a server script API with the API Designer
            • Configure a server script API
            • Add an operation
            • Add definitions and properties
          • Create a table definition API with the API Designer
            • Configure a table definition
            • Add an operation
            • Add definitions and properties
          • API import with the API Designer
            • Import an API definition for an external API
            • Import an API for a table definition
            • Import an API for a server script
          • Export an API from the API Designer
          • Import a definition into an API
          • Use API Discovery Service
          • Implement pre-request hook script
        • API Client
        • API Trace
        • Swagger UI
        • OData Source
          • Add an OData resource
          • Add authentication to an OData resource
          • Add an endpoint for a system role
        • OData Mock Data
          • Create an OData mock data artifact
          • Add data to an OData mock data artifact
        • Connector
          • Create a connector for a table definition
          • Create a connector for a server script
          • Create a connector for an API
          • Use connectors in the App Designer
          • Create and use OData Connector
      • Administration
        • Application Management
        • Tile
          • Configure general information about your tile
            • Configure the layout of your tile
            • Add actions to your tile
            • Further configure your tile
            • Run integration cards and Highcharts in a tile
          • Cockpit tiles (and tile groups)
        • Tile Group
          • Configure general information about your tile group
          • Add tiles to your tile group
            • Configure the layout of your tile group
            • Restrict access to your tile group by using roles
            • Add child tile groups to your tile group
            • Add a translation for your tile group
        • Launchpad
          • Add a new launchpad
            • Configure general information about your launchpad
            • Add a tile group to your launchpad
            • Configure the layout of your launchpad
            • Further configure your launchpad
          • Enable anonymous login for a launchpad
          • Enable self-registration in a launchpad
        • Mobile client
          • Configure general information about your mobile client
            • Configure the security settings of your mobile client
            • Configure the device settings of your mobile client
            • Configure the plug-ins of your mobile client
            • Further configure your mobile client
          • Produce a mobile build
        • Mobile Debug
          • Add a mobile debugger
        • Tile Blackout
          • Enable tile blackout
          • Disable tile blackout
        • Favorite Management
          • Add favorite tiles to a launchpad
        • Translation
          • Translate artifacts in a tile or tile group
      • Monitoring
        • System Processes
        • Lock Entries
          • Remove lock entries
        • Housekeeping
        • SMTP Log
        • System Logs
        • System Reports
        • User Sessions
        • PDF Archive
        • Application Log
        • Launchpad Trace
        • Push Notification Users
          • Send a push notification
          • Delete a push notification user
        • Load Test
          • Create a load test
          • Run a load test
      • Tools
        • Job Manage
          • Create a background job
            • Configure a job
            • Define schedule of a job
            • Add steps to a job
        • Job Log
        • Table Definition
          • Configure a table definition
          • Add properties to a table definition
          • Add a foreign key to a database table
          • Add an index to a database table
          • Define reading and writing rights for a database table
        • Table Browser
        • Events
          • Script triggered by an event
          • Create and use event listener and event trigger
      • Testing
        • Define test units
          • Create a test unit
        • Plan the test
          • Create a test plan
        • Run the test
          • Run a test plan
      • Deployment
        • Deployment Create
          • Create a deployment package
        • Deployment Approve
          • Approve a deployment
        • Deployment Transfer
          • Export a deployment package
        • Deployment Routes
          • Create a deployment route
        • Deployment Log
          • Import a deployment package
      • Security
        • User
          • Add a new user
          • Edit an existing user
          • Delete an existing user
        • Group
          • Add a new security group
          • Security groups within applications, tiles, and tile groups
        • Role
          • Add a new role
          • Roles within applications, tiles, and tile groups
        • Audit Log
          • Export an audit log
        • Remote systems
          • Add and configure a remote system to your system
          • Add an authentication method to a remote system
          • Add endpoints
        • Import LDAP
          • Import a user from LDAP
          • Import a group from LDAP
        • Proxy Authentication
          • Add a new authentication method
          • Edit an existing authentication method
          • Delete an existing authentication method
          • Types of proxy authentication
        • Certificates
          • Generate a new certificate
          • Import a certificate
          • Delete a certificate
        • Table Audit
          • Export a table audit log
      • Workflow
        • Getting started guide
        • Overview
          • Start a workflow
          • Rerun approver determination
        • Definition
          • Add a new workflow
          • Workflow editor at a glance
          • Work with the workflow editor
          • Edit a workflow
          • Delete a workflow
          • Start a workflow
        • Task Action
          • Add a new task action
          • Edit an existing task action
          • Delete a task action
        • Approvers
          • Add a new approver
          • Edit an approver
          • Delete an approver
        • Substitutions
          • Add a new substitution
          • Manage substitutions
      • Settings
        • System Settings
          • General/Authentication
          • Database/Storage
          • License/Emailing/Password
          • Authentication
            • Microsoft Entra ID authentication
            • Configure authentication in the Microsoft Entra admin center
            • Add Microsoft Entra ID authentication to your system
            • JSON web token (JWT) authentication
            • Lightweight Directory Access Protocol (LDAP) authentication
            • Configure an OAuth 2.0 authentication
              • OAuth 2.0 Authentication with Google
            • OpenID Connect authentication
              • OpenID authentication with Google
            • SAML authentication
            • Neptune DXP - SAP Edition authentication
          • Cloud Connector
            • Enable and configure Cloud Connector
        • Custom Settings
          • General
          • Layout/Texts
    • Add-ons
      • Forms
        • Forms at a glance
        • Build a simple form
        • Load Neptune forms in adaptive applications
    • Integration
      • The Neptune DXP cookbook
        • Step 1: Neptune DXP - SAP Edition installation - On Premises
        • Step 2: Neptune DXP - Open Edition installation – Neptune DXP Cloud
        • Step 3: Neptune DXP - Open Edition remote system setup
        • Step 4: SAP principal propagation setup (optional)
        • Step 5: Neptune DXP - SAP Edition API creation
        • Step 6: Neptune DXP - Open Edition API Discovery Service
        • Step 7: Neptune DXP - Open Edition launchpad integration of Neptune DXP - SAP Edition applications
      • Push notifications
        • Set up Firebase
        • Activate Firebase and push notifications
        • Example code for push notifications
      • Integrate Esri in Neptune DXP - Open Edition
      • Integration of APIs from the Store
      • Chatbot integration in Neptune DXP - Open Edition
      • Integration of customer relationship management (CRM) services
        • Create and configure a Salesforce account
        • Connect Neptune DXP - Open Edition with Salesforce
        • Create an API to connect to your Salesforce account
        • Example: retrieve data with the Salesforce API
      • Set up SSO with SAP BTP and Neptune DXP - Open Edition
      • Install Neptune DXP - Open Edition on SAP BTP with PostgreSQL
    • Authentication
      • Microsoft Entra ID groups and roles token claims
        • Use Microsoft Entra ID groups claims
        • Use Microsoft Entra ID roles claims
      • Use a JWT token as authentication method to access an external API
        • Download and configure an API
        • Access the API from an external system
      • SAP principal propagation
        • Enabling principal propagation in Neptune DXP - Open Edition
        • Generate a user certificate
        • Import the certificate to SAP (BASIS)
        • Configure parameters in the SAP system (BASIS)
        • Map user of Neptune DXP - Open Edition and user of SAP
        • Create an authentication method in Neptune DXP - Open Edition
        • Assign an authentication method
    • FAQ
    • Request documentation
Neptune DXP - Open Edition 23
  • Neptune DXP
    • landing
  • Neptune DXP - Evaluation Guide
    • All
  • Neptune DXP - Open Edition
    • 23
    • 22
  • Neptune DXP - Portal
    • All Versions
  • Neptune DXP - SAP Edition
    • 23
    • 22
    • 21
  • Neptune DXP Cloud
    • All Versions
  • Neptune DXP - Open Edition
  • Cockpit
  • Development
  • App Editor
23 22

App Editor

The App Editor is a specialized code editor for creating applications with JavaScript frameworks like React.js and Vue.js. It embodies a pro-code approach to application development.

Related topics

  • Getting started with the App Editor

  • App Editor user interface at a glance

  • Development

This page was built using the Antora default UI.

The source code for this UI is licensed under the terms of the MPL-2.0 license.