E-Learning Community DXP Portal Support
Free Trial

Neptune DXP - Open Edition

    • Release notes
      • Neptune DXP - Open Edition 24.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
      • Design best practice
      • Sizing guide
    • Upgrade
      • Prerequisites
      • Upgrade Neptune DXP - Open Edition on Linux
      • Upgrade Neptune DXP - Open Edition on macOS
      • Upgrade Neptune DXP - Open Edition on Windows
    • Installation
      • System requirements
      • Download link
      • Basic installation of Neptune DXP - Open Edition
        • Install Neptune DXP - Open Edition on Linux
        • Install Neptune DXP - Open Edition on macOS
        • Install Neptune DXP - Open Edition on Windows
      • Run Neptune DXP - Open Edition
      • Cloud installation of Neptune DXP - Open Edition
        • 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
      • Database configuration for Neptune DXP - Open Edition
        • Microsoft SQL setup
          • Settings on SQL Server Management Studio and SQL Server Configuration Manager
          • Settings on Neptune DXP - Open Edition
      • Basic setup of Neptune DXP - Open Edition
        • Install npm modules
      • Advanced setup of Neptune DXP - Open Edition
        • Use npm modules on a virtual machine
        • Load balancing
        • Set up default ports in Windows
        • High-availability setup of Neptune DXP - Open Edition
    • 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
          • Role-based access control for development packages
            • Add a user role to a development package
        • Adaptive Designer
          • Adaptive Designer user interface at a glance
            • Shell bar
            • Side navigation
            • Data fields
            • Application tree
            • Preview
            • Settings/properties
          • Adaptive templates
            • Adaptive list
              • Save filter variants in the adaptive list template
            • 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
              • Import table data to an adaptive application
            • Create an adaptive application based on a server script
            • Create an adaptive application in guided mode
          • 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
            • Display server scripts messages for events in adaptive templates
          • Export adaptive application
          • Create adaptive application from export
          • Create a copy of an adaptive application
          • Create an event in guided mode
        • 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
            • Application Flow
            • Version Management
          • Data models in the App Designer
        • 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
          • Debug 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
        • Launchpad Layout
        • 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
        • Global Style
        • Tile Group Layout
        • Tile Layout
        • UI5 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
          • Create a connector for an API with the SAP API Factory
          • 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
            • Add a translation for your 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
            • Configure the layout of your tile in a 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
            • Launchpad appearance
            • Configure the layout of your launchpad
            • Further configure your launchpad
          • Enable anonymous login for a launchpad
          • Enable self-registration in a launchpad
          • Active launchpad user settings
        • 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
        • User Sessions
        • PDF Archive
        • Application Log
        • Launchpad Trace
        • Push Notification Users
          • Send a push notification
          • Delete a push notification user
      • 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
          • Import table data
          • 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
          • Import table data to an existing table
        • Events
          • Script triggered by an event
          • Create and use event listener and event trigger
      • 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
        • Security 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
            • Manage trial license
            • Manage online license
            • Manage offline license
            • Remove 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
        • 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 24
  • Neptune DXP
    • landing
  • Neptune DXP - Evaluation Guide
    • All
  • Neptune DXP - Open Edition
    • 24
    • 23
    • 22
  • Neptune DXP - Portal
    • All Versions
  • Neptune DXP - SAP Edition
    • 24
    • 23
    • 22
    • 21
  • Neptune DXP Cloud
    • All Versions
  • Style guide
    • All
  • Neptune DXP - Open Edition
  • Cockpit
  • Development
  • App Designer
  • Ways to create an application in Neptune DXP - Open Edition
  • Add custom HTML in the App Designer
24 23 22

Add custom HTML in the App Designer

One of the components available in the App Designer is the HTML object component, which enables you to generate HTML elements within the application tree. The HTML object can range from a simple Div to a fully designed page, offering a wide range of possibilities for customization.

Related topics

  • App Designer

  • App Designer user interface at a glance

  • Ways to create an application in Neptune DXP - Open Edition

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.