Enable Business Users to Embed Dynamic Database Content in Existing

Web-Based Systems Using Web Components and Generic Web Services

Andreas Schmidt

1,2 a

and Tobias M

unch

3,4 b

Institute for Automation and Applied Computer Science, Karlsruhe Institute of Technology (KIT), Karlsruhe, Germany

Department of Computer Science and Business Information Systems, Karlsruhe University of Applied Sciences,

Karlsruhe, Germany

unch Ges. f

ur IT Solutions mbH, Gewerbering 1, 49393 Lohne, Germany

Chemnitz University of Technology, Chemnitz, Germany

Keywords:

Web Component, Relational Database, Low Code, Prototyping.

Abstract:

In our digitalized world and under the economic pressure of competition, every company must react ﬂexibly to

opportunities and problems that arise. One way to cope with these challenges is to use web-based Enterprise

Resource Planning (ERP) or Customer Relationship Management (CRM) Systems, which provide signiﬁcant

functionality inside their system range. Third-party systems often have to be integrated with ERP or CRM

systems but cannot be connected, for instance, because of limited Application Programming Interfaces (API)

or data structures. Therefore, such tasks are complex and time-consuming and must be done by software engi-

neers, who are limited resources in today’s enterprise context. However, HTML documents can be integrated

with web-based systems such as ERP or CRM, and HTML creation is not limited to the software engineering

workforce. Our low-code environment, which is based on W3C web components standards and RESTful web

services with state-of-the-art authentication approaches, could solve the shortage because we empower busi-

ness developers to embed dynamic database content declaratively in static HTML pages or web-based systems

such as WordPress or SoftEngine ERP-Suite. Our system also allows the declarative integration of forms for

creating/modifying and deleting data records (CRUD functionality). The low-code web components access

the database via the RESTful service. The API of the RESTful service abstracts the database manufacturer-

speciﬁc characteristics, such as the storage format of the metadata.

1 INTRODUCTION

Today, ﬁrst-world countries are grappling with a

shortage of skilled software engineering workers, a

challenge exacerbated by the competitive nature of

our businesses and the increasing importance of dig-

italization (Breaux and Moritz, 2021; Hyrynsalmi

et al., 2021). However, there is a beacon of hope in

the form of low-code solutions, which offer a promis-

ing way to address this pressing issue (Elshan et al.,

2023).

In Germany, companies are categorized as mi-

cro, small, middle, and enterprise companies (StB,

2024). Micro and small companies often have lim-

ited budgets and liquidity for information technol-

ogy expenses (Almaree et al., 2015). Therefore,

https://orcid.org/0000-0002-9911-5881

https://orcid.org/0000-0001-9424-6201

they usually use several cloud applications as Soft-

ware as a Service (SaaS) and have an external IT

service provider (Bajenaru, 2010). In comparison,

mid-sized and larger companies often have IT depart-

ments, which are frequently overloaded with admin-

istrative and maintenance tasks (Grooss, 2024).

So, the main challenge is that a company’s users

often have different business challenges that must be

handled quickly, but the IT resources of companies

can not cope with these load peaks. However, the

average business developer should have achieved ba-

sic HTML knowledge in school, as the Committee

on European Computing Education (CECE) reported

(CECE, 2017). What if these users could handle most

minor challenges using a low-code HTML library?

Our proposal is a versatile low-code library of

web components connected to our generic REST-

ful (Richardson et al., 2007) web service, designed

to seamlessly integrate third-party databases into var-

296

Schmidt, A. and Münch, T.

Enable Business Users to Embed Dynamic Database Content in Existing Web-Based Systems Using Web Components and Generic Web Services.

DOI: 10.5220/0013000000003825

Paper published under CC license (CC BY-NC-ND 4.0)

In Proceedings of the 20th International Conference on Web Information Systems and Technologies (WEBIST 2024), pages 296-306

ISBN: 978-989-758-718-4; ISSN: 2184-3252

ious web-based systems. Whether it’s an ERP sys-

tem, a CMS system like WordPress, a SaaS solution,

or even a simple HTML ﬁle in an arbitrary directory

on a local PC, our solution is adaptable to the unique

needs and IT setups of companies of all sizes.

The rest of the paper is structured as follows. In

Chapter 2, we present the scenarios for our proposal

and how it would affect the main stakeholders. After-

wards, we describe in Section 3 our work regarding

existing research, such as database access through the

web, web standards, related solutions and low-code

approaches. Upon the existing research, we describe

our overall system architecture in Section 4. Then,

we focus on the detailed implementation of various

web components and their purpose in Section 5. Af-

terwards, the usage of our system is described in Sec-

tion 6 with an example application in a real-world sce-

nario for a distributor of food and beverages. Before

we summarize our current state of research in Sec-

tion 8 and point out future work, we will discuss cur-

rent limitations and possibilities for improvement in

Section 7 .

2 SCENARIOS

In theory, enterprise companies have various systems

to store, process, and provide information securely

and safely for several departments to provide busi-

ness value for their customers in a uniﬁed IT envi-

ronment (Minoli, 2008). The cross-cutting IT depart-

ment monitors, maintains, and extends the enterprise

IT architecture for the whole company cost-efﬁciently

(Minoli, 2008). However, the enterprise software ar-

chitecture in mid-sized companies is more heteroge-

neous, with various applications and data structures

for a particular department, such as a schedule for hu-

man resources interviews. This discrepancy can be

explained by Conway’s law, which states that every

company will produce a copy of its own organiza-

tional structure inside a developed system (Herbsleb

and Grinter, 1999).

However, the IT Team in mid-sized companies of-

ten ﬁnds itself in a challenging position. Despite their

best efforts, they struggle to fulﬁl special integration

requests from internal clients (Haug et al., 2011). This

is primarily due to their limited resources, which are

mainly dedicated to maintaining the central systems.

As a result, they cannot cater to the diverse needs of

the various departments, leading to a signiﬁcant gap

in service delivery.

These distinct applications for speciﬁc use cases

often must change or be integrated quickly and re-

siliently to ﬁt changing market requirements. There-

fore, a low-code approach could be an enabler for dig-

ital transformation in the industry because users with

limited programming knowledge could handle many

tasks themselves (Prinz et al., 2021). According to

the CECE’s work, citizens probably used HTML in

school because they should be ﬂuent with standard IT

tools such as web browsers (CECE, 2017). Addition-

ally, web-based business applications’ market share

is increasing, and in these applications, HTML docu-

ments could be used to extend the functionality (Busi-

ness Research, 2024).

Our proposed approach does not completely over-

haul the existing systems. It acknowledges the users’

background and the presence of existing systems.

It assumes that some of the company’s applications

are based on databases that can be connected to our

generic RESTful web services. They provide the data

and meta information, such as attribute details and the

actual dataset, making them a valuable resource in our

procedure.

The following sections explain different scenarios

based on the perspectives of administrators, business

developers, and users to deﬁne the speciﬁc working

environment for our low-code HTML technique.

2.1 System Administrator

The System Administrator is the backbone of each

company’s IT department. They are responsible for

ensuring the smooth operation and maintenance of

the current infrastructure, including software and on-

premise hardware. Typically, IT workers have com-

pleted an apprenticeship (44%) or used a lateral en-

try (23%) and sometimes a computer science study

(16%), underscoring their expertise and dedication to

their role (Statista, 2024).

In our case, he should accomplish the new task

of installing, conﬁguring and connecting the RESTful

Webservice to one or more internal databases such as

Postgres or MySQL. The databases are linked through

corresponding entries in a conﬁguration ﬁle where the

access information is stored and the authentication

mechanism is speciﬁed.

In companies, it is necessary to recognize a role-

based access and control system (RBAC) such as

Keycloak or an Active Directory so that only a distinct

group of users can access a speciﬁc data source. For

example, this could be realized with a role through

Keycloak, which is then provided inside the Java

Web Token (JWT). The RESTful Webservice exam-

ines this JWT.

Enable Business Users to Embed Dynamic Database Content in Existing Web-Based Systems Using Web Components and Generic Web

Services

297

2.2 Business Developer

With their expertise in building business processes,

the business developer is a critical player in the

system. The stakeholder is part of Business De-

velopment, which Uittenbogaard et al. describe as

’involves the actual development of product-market

combinations; in other words, it consists of the execu-

tion of the innovation process’ (Uittenbogaard et al.,

2005).

In our case, they are the drivers of business im-

provements, and their role is crucial in ensuring that

the system meets the needs of the users and the com-

pany’s business processes. They integrate the low-

code web components into web-based systems and

connect them to the previously connected databases

using the conﬁguration speciﬁed by the system ad-

ministrators.

2.3 User

Finally, users, such as service agents, interact with the

integrated web components and use them and their

interaction options as part of the business process.

Several examples of how a user would use the pro-

vided web components include seeing data on a cen-

tral monitor, additional information for order through

a parts list provided by a construction software sys-

tem, or further appointments connected with a proce-

dure. In Section 6, we will focus on a use-case inside

the purchasing department of a distributor for food

and beverages.

3 RELATED WORK

According to the scenarios described in the previ-

ous section, our focus lies on the related works of

database access through the web, Java applets, and

low-code development because each approach inte-

grates different aspects of our work.

3.1 Database Access Through the Web

The classic approach to bringing database content to

the web are server-side web applications designed

and implemented for a particular ﬁeld of applica-

tion (Florescu et al., 1998). Specialized frameworks

such as Django (Python), Symfony (PHP), or Ex-

press (JavaScript) are also often used for this pur-

pose. Most of these implement a form of the model-

view-controller (MVC) paradigm and use an object-

relational mapping framework to access the database.

On the one hand, this requires knowledge of the pro-

gramming language or the framework used, as well as

access to the corresponding development and runtime

environment. On the other hand, the present work

takes a client-side, declarative low-code approach, in

which database content is integrated declaratively into

web pages. The W3C composite standard web com-

ponents (Web, 2024) is used for this purpose.

3.2 Web Components

Web components are a W3C standard supported by

all recent web browsers and allow the deﬁnition of

custom HTML elements (Web, 2024). For this pur-

pose, a developer creates a JavaScript class of cus-

tom web components that deﬁnes the new HTML

element’s behaviour and the browser’s visual repre-

sentation. The newly deﬁned element can be used

once the JavaScript class is included in an HTML

page. As the entire logic is encapsulated within the

JavaScript class, no other runtime environment be-

sides the browser is required, such as a server-side

application server. Of course, the components can

communicate with external services if needed, but in

principle, no further services are necessary to run the

web components.

The JavaScript class that deﬁnes the logic and vi-

sual appearance of the new element must inherit from

the HTMLElement class (Web, 2024) and, in addition

to the actual application logic, implement a series of

predeﬁned methods that realize the integration of the

element into the Document Object Model (DOM) tree

of the HTML page.

Custom HTML elements have a naming conven-

tion that speciﬁes that the names must have a hyphen

(such as <db-table>) and that they must have an

opening and mandatory closing tag in the HTML page

(<db-table name="city" ...></db-table>).

3.3 Java Applets

Java applets (Boese, 2009) follow a similar approach

to web components. Both approaches run on the

client within the browser, and some predeﬁned meth-

ods must be implemented to integrate the applica-

tion into the HTML page. The integration is declar-

ative in both cases and parameters can be passed to

the application. The programming model allows pro-

grammatic access to the DOM tree of the embedding

website, similar to the web components. With Java

Database Connectivity (JDBC) (Reese and McLaugh-

lin, 2003) there is also a sophisticated access API for

relational databases available. The applets are inte-

grated into the web pages using the elements embed

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

298

or object. From the mid-2010s, however, browser

manufacturers gradually discontinued support for ap-

plets (Oracle, 2020).

3.4 Low Code Development

The evolution of low-code development platforms

will signiﬁcantly transform software engineering

tasks and help business developers build applica-

tions themselves without being too deep into coding

(Prinz et al., 2021). Low-code development platforms

(LCDPs) offer a visual approach to application devel-

opment, primarily through model-driven design and

declarative programming (Elshan et al., 2023; Prinz

et al., 2021). The LCDPs also provide web appli-

cations as an output, such as the low-code platform

Xelence by Sagitec Software (Arora et al., 2020).

In the study of Prinz et al. the participants men-

tioned using low-code solutions because of the re-

duced coding effort and the low learning curve (Prinz

et al., 2021)

As part of the low-code initiative, a number

of application builders have emerged, such as Cas-

pio (Caspio, 2024), Budibase (Budibase, 2024),

webﬂow (Webﬂow, 2024), and Bubble.io (Bubble,

2024), which make it possible to develop web-based

applications in the form of single-page applications

with little or no programming effort. However, these

represent a self-contained system that cannot be inte-

grated into existing web applications, or only with dif-

ﬁculty. Our low-code web components provide such

functionality with ease of development, interoperabil-

ity, extensibility and maintainability.

4 OVERALL ARCHITECTURE

Figure 1 illustrates the overall architecture of the

application. The developed web components (with

preﬁx db-) operate in the browser and communicate

with each other through method calls or via a public-

subscribe mechanism.

Communication with the databases does not oc-

cur directly between the components and the database

but between the component db-server and a RESTful

web service (rdbms.php), which acts as an interface

to the connected relational databases. We used the

php-crud-api REST Service (van der Schee, 2024)

by Maurits van der Schee as a core, which we ex-

tended with a number of additional modules. In ad-

dition to php-crud-api, there are a number of other

existing libraries, such as db2rest (db2rest, 2024),

which could have been used instead. For an overview,

see (Bohdan, 2024). The web service provides the

following functionality:

Database Selection: To support multiple databases

dynamically, a separate entry point (rdbms.php)

was implemented. Databases that should be ac-

cessible from the RESTful API are speciﬁed in a

conﬁguration ﬁle. The authentication method is

also deﬁned at this point. Each database is spec-

iﬁed by a logical name under which it can then

be accessed from the web components. Figure 4

(middle) shows the structure of the entries in the

conﬁguration ﬁle.

Access Control: The php-crud-api-server already

offers an interface to use different authentica-

tion mechanisms like authentication via API key,

username/password combination and JWT to-

ken (Peyrott, 2024). All these mechanisms are

based on transporting authentication information

in the HTTP header. To also support local HTML

ﬁles accessed via the ﬁle URI schema (Kerwin,

2017), we have integrated an additional mecha-

nism that sends an API key as an HTTP param-

eter. The reason for this are CORS (Hossain,

2014) restrictions that would otherwise not allow

access from the web components to the web ser-

vice when accessing the HTML document via a

ﬁle URI (like file:///tmp/dbwc-demo.html).

This type of access places the least demands on a

business developer, as only an editor to create the

HTML documents and a browser with an internet

connection are required to access and visualize the

database content.

CRUD Functionality: For retrieving the data for a

single table and the modiﬁcation of datasets, we

use the functionality of the previously mentioned

RESTful php-crud-api service. The software is

very easy to install, by only copying a single PHP

script to our web server and provides the full func-

tionality we need to extract, create, modify, delete,

ﬁlter and sort datasets. The software can also be

easily extended by deﬁning and integrating your

own controllers.

Metadata Access: This extension returns metadata

about the available databases. These include

(1) available databases, (2) available tables per

database, (3) columns, data types and constraints

of the individual tables. The constraints include

primary keys, foreign key relationships, not null,

and unique constraints.

Metadata plays an important role, as it allows, for

example, the resolution of foreign key relation-

ships, the monitoring of non-null constraints, and

the performance of data type checks on the client

side. Furthermore, visualization and editing op-

Enable Business Users to Embed Dynamic Database Content in Existing Web-Based Systems Using Web Components and Generic Web

Services

299

tions corresponding to the data types can be im-

plemented.

SQL Module: The SQL module extension makes it

possible to directly issue SQL statements to the

relational database. The statements are passed

as arguments from the db-query web component

(Section 5.5), which is then also responsible for

displaying the result data records.

Figure 1: Architecture of our database web components.

The module rdbms.php receives the requests from the

db-server web-component and forwards them to the

database speciﬁed in the request. The access information

for the database is stored in the database conﬁguration (see

Figure 2) on the server. The results are then returned to the

web components via the rdbms module.

5 COMPONENTS

As part of our research work, we have developed a se-

ries of web components for the declarative integration

of database functionality into HTML pages.

db-server: This component establishes the connec-

tion between the components and the backend.

Except for user authentication, it has no visual

representation, but is used by the other compo-

nents to communicate with the database via the

RESTful service.

db-table: Component that represents a database ta-

ble or a part of it.

db-row: Component representing a single dataset

(row in a table). The functionality of this com-

ponent ranges from the simple predeﬁned visual-

ization of the component to the creation and edit-

ing of datasets using internal or external forms to

its use as a controller in a Model-View-Controller

setup.

db-ﬁeld: Component that represents a single at-

tribute of a db-row component.

db-select: The functionality corresponds to the

HTML select element, in which an entry can be

selected from a series of predeﬁned values. In the

database context, it can resolve and set foreign key

values.

db-query: Component that represents an SQL select

query.

In the following section, we will present these com-

ponents in detail. The data in the example screen-

shots shown comes from the Mondial database (May,

1999). Since the php-crud-api module we use does

not support updates of records with composite keys,

we have modiﬁed the schema of the Mondial database

by replacing the composite keys with artiﬁcial numer-

ical keys and adjusted the foreign keys accordingly.

5.1 Server-Component

The ﬁrst component we present is responsible for

communicating with the web service. The server

component can occur several times so that multiple

databases can be accessed from one HTML page.

Figure 2 shows the mapping between the db-

server component inside a HTML page to a speciﬁc

database. The component db-server speciﬁes the end-

point of the RESTful service and a logical database

name using the parameters url and database) (left

side of the ﬁgure). On the REST-API side (middle),

there exists a conﬁguration ﬁle that maps the logi-

cal database name (i.e. webist-demo) to a speciﬁc

database (right side of the ﬁgure). This mechanism is

similar to ODBC or Oracle tns-names (Oracle, 2024).

Note that the database can run on any computer and

not necessarily on the computer with the REST-API

endpoint.

To access the URL of the RESTful service from

the browser, you must either allow Cross-Origin Re-

source Sharing (CORS) on the server or conﬁgure a

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

300

Figure 2: Database mapping - the RESTful service maps the logical database name (webist-demo) speciﬁed in the web

component (left-side) to the access information stored in the database conﬁguration ﬁle (middle) and uses this to access the

speciﬁed database (right side).

reverse proxy that forwards the request from the orig-

inal host to the speciﬁed URL, if the URL points to

another host.

5.2 Table-Component

The db-table component is responsible for displaying

the content of a database table or a part of it. The

functionality ranges from the static display of a ta-

ble with pre-deﬁned conditions (selection) on the data

records and the selection of certain columns (projec-

tion), to a highly interactive component that reacts dy-

namically to changes in the table content and offers a

range of interaction options.

Figure 3 shows in the upper part the appearance

of the component db-table inside the browser. The

component allows page-by-page scrolling (1), sorting

by column values (2), in-line editing (3), and the for-

mulation of additional conditions (4) as well as the

possibility to edit/delete datasets (5).

The corresponding HTML-code is shown in the

lower part of Figure 3. Beside the db-table compo-

nent, also the corresponding db-server component

is shown.

The attribute-list attribute deﬁnes the

columns to be displayed, while the action attribute

deﬁnes the possible functionalities of the component.

Speciﬁcally, inline-edit (3), ﬁltering (4), as well

as editing and deleting data records (5) and page-

by-page scrolling (1) are activated. The pagesize

attribute speciﬁes the number of data records per

page. In addition to the parameters from Table 1, the

component’s appearance can also be adapted to your

requirements using cascading stylesheets (CSS).

Figure 3: Visual appearance of the web component db-table

(top) and the corresponding HTML code (bottom). The at-

tributes attribute-list, action, and pagesize specify

the visual appearance and behaviour of the table.

5.3 Row-Component

The component db-row has several tasks. The stan-

dard conﬁguration allows you to edit a data set spec-

iﬁed by the primary key in a formula provided by

the component. This component extensively uses

the metadata provided for a table by metadata mod-

ule of the RESTful-service. This applies to informa-

tion about the data types of the ﬁelds, the not null

constraint and information about foreign-key relation-

ships.

This function is shown above in Figure 4, which

displays the dataset for ”France”. Here, the value of

the foreign key attribute Capital, which refers to the

capital of a country, is not displayed as a numerical

foreign key value, but a selection ﬁeld that displays

the referenced value and simply offers the possibil-

Enable Business Users to Embed Dynamic Database Content in Existing Web-Based Systems Using Web Components and Generic Web

Services

301

Table 1: db-table Attributes.

Attribute Description Mandatory

table Name of the table yes

ﬁlter Mandatory ﬁlter condition, every dataset must fulﬁl no

pagesize Maximum number of rows on a page no

order Sort order (column name) no

direction Sort direction (asc, desc) no

page Page to display no

connection Id of a db-server web component. If the attribute is not set, the default server

component is chosen

attribute-list Comma separated list of attributes to display (default: all) no

actions Allows the activation of ”inline-edit”, ”delete”, ”edit”, ”ﬁlter”, and ”paging”

functionality

refresh-rate Time in seconds after which the table data is reloaded from the database no

ity to change it using the full-text search function of

the web component db-select described later in sec-

tion 5.4.

The lower part of Figure 4 shows the correspond-

ing declaration of the db-row element inside the

HTML page. The key attribute is used here to pro-

vide the primary key value of the dataset of ”France”.

If the attribute key is omitted, the component offers a

form for creating a new data record.

Figure 4: Web component db-row: Visual presentation (top)

and embedding in a HTML page (bottom). The record with

the primary key value 60 (attribute key) of table country

(attribute table) is displayed. The foreign key column

Capital is resolved and displayed as a db-select com-

ponent in which the possible values can be selected.

The component has various options for customiz-

ing the appearance of the provided form using CSS.

If these design options are not sufﬁcient, the compo-

nent also offers the option of working with external

forms. This leads to signiﬁcantly more possibilities

for inﬂuencing the layout.

If the dataset should only be displayed but not

changed, there is a ”read-only” mode in which the

dataset is shown in tabular form (2 columns). Again,

style sheets can be used to customize the layout. The

additional use of the db-field component is even

more ﬂexible in terms of visualisation. In this case,

several db-fields are linked to a db-row compo-

nent. The db-row component then only serves as a

data source for the db-fields components but is no

longer responsible for the output, which is then taken

over by the db-fields components. This allows any

desired page layout.

Using the controller parameter, the component

can be used as a controller within an Model View

Controller (MVC) setup. In this case, the component

reads the values of a dataset either from the GET pa-

rameters of the current URL or from a JSON string

passed to the data parameter and writes the dataset to

the database. Depending on the transferred attributes,

an SQL INSERT or an UPDATE statement is exe-

cuted. The distinction is made on the basis of the ex-

istence and value of the primary key attribute. Alter-

natively, another attribute can be speciﬁed that takes

over the role of the primary key. If a data record al-

ready exists in the database with a matching value for

this attribute, an SQL-UPDATE is performed. Oth-

erwise, an INSERT operation is executed. After exe-

cuting the SQL statement, the web component loads

the referring page or an arbitrary page, which can

be speciﬁed with the additional parameters target-url

and error-url. In Section 6 an application in the con-

text of the MVC paradigm is shown, in which a page

containing a form acts as a view and the HTML page

with the db-row component takes over the controller

part.

5.4 Selection-Component

The db-select web component shows a selection box

from which values can be selected. The values of

the selection box can either originate from a table by

specifying the table name and an optional condition or

be speciﬁed through an SQL statement. Analogous to

the behaviour of the standard HTML-select box, one

or two values can be speciﬁed. The ﬁrst value is the

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

302

value to be returned from the form, and the second is

the text to be displayed. A simple text-match search

and a preﬁx search are offered to ﬁnd the entries you

are looking for. Figure 5 (top) shows the appearance

of the db-selection box. The search text entered is

highlighted in colour in the matching entries. The un-

derlying markup code can be seen in the lower part of

the ﬁgure. Attribut table speciﬁes the table where

the values come from. The attribute name represents

the name of the element within the formular (element

form), which is passed on to the formular together

with the selected value. The attribute label names

the column in the table, from which the values being

displayed are taken, while the attribute key speciﬁes

the column whose value is passed to the form.

Figure 5: Web component db-select. Preﬁx search in col-

umn name (attribute label) of table country (attribute

table).

5.5 Query-Component

The db-query component is quite similar to the db-

table component. The main difference is that no table

and optional parameters such as filter and order

are speciﬁed, but an arbitrary SQL select statement.

The upper part of Figure 6 shows the component’s ap-

pearance in a browser, while the lower part shows the

embedding of the web component in the HTML page.

The provided SQL-Statement, returns the number of

bordering states and the total length of external bor-

ders for each country, sorted by total border length in

descending order.

Just as with the db-table component, additional

optional parameters such as refresh-rate, pagesize,

etc. can be speciﬁed.

5.6 Schema Independence

Due to the consistently generic structure of the com-

ponents and the RESTful service, our components are

independent of any schema changes to the database

(as long as the tables used continue to exist and no

columns explicitly speciﬁed in the components are

Figure 6: Visual appearance of the web component db-

query (top) and the corresponding HTML code (bottom).

omitted). This is realized by the components and the

RESTful service having access to the meta informa-

tion of the relational database, which always returns

the current state of the database schema and is the

only basis for structural information within the com-

ponents.

5.7 Customization

The components are displayed with a standard lay-

out. However, this layout can be customized using

CSS and a series of possible attributes for the compo-

nents. Additionally, the db-row component can be

adapted to the layout preferences using an external

HTML form or additional db-field components.

As an example, Table 1 gives an overview of the

supported attributes for the db-table component.

6 EXAMPLE APPLICATION

Our example scenario involves a distributor of food

and beverages for gastronomy operating within a

web-based ERP system that also includes a Customer

Relationship Management (CRM) module. In this or-

ganisation, the purchasing department has a second

application that lacks API connectivity to the CRM.

Therefore, users must email the purchasing depart-

ment if they request new items to purchase. Intro-

ducing our low-code approach into this environment

Enable Business Users to Embed Dynamic Database Content in Existing Web-Based Systems Using Web Components and Generic Web

Services

303

Figure 7: Example Application: Embedded web components in customer view of the SoftEngine ERP-Suite (View with

HTML form and db-table component (top, right), controller markup (bottom).

will streamline the business process and signiﬁcantly

support our stakeholders.

Internal and external service agents are responsi-

ble for their customers. During phone calls or on site,

the customer confronts the service with requests for

new articles, when they need them and how much

they would like to purchase per week. The service

agent can enter the demand information on the cus-

tomer data sheet through the low-code web compo-

nents for the purchasing department embedded in the

CRM. In Figure 7 (top), our web component table

is included in the SoftEngine ERP-Suite (Eggert and

Meier, 2010). The data directly persisted in the pur-

chasing system, and the purchaser could operate with

the data. The service agent can see if the customer

demand was accepted by the attribute done through

a status dashboard provided by the web components

inside the CRM.

So far, we have seen how the service agents inter-

act with the integrated web components in this busi-

ness process. However, the system administrator and

business developer must ﬁrst integrate these compo-

nents. The system administrator’s role in integrating

the web components is crucial. He makes the rele-

vant tables in the purchasing system database acces-

sible through a new database user for the web compo-

nents. Then, he deﬁnes the connection settings within

the conﬁguration of the data-providing web service,

which they had installed previously. The system ad-

ministrator then hands over the name of the database

conﬁguration ﬁle to the business developer.

The business developer integrates our low-code

web components. In this speciﬁc case, it uses a

db-server component for accessing the database, a

db-row component that enables the creation of a new

customer request, and a db-table component that

lists the previous customer requests. How the inte-

gration looks is described in Section 5 and will there-

fore not be discussed further here. The business de-

veloper uses the system administrator’s conﬁguration

to connect to the database via the RESTful web ser-

vice. He is also responsible for matching the user re-

quirements, such as selecting the right attributes and

features, to build a solution that meets the needs of

the target user group. In our case, the users are our

distributor’s service agents. In the lower part of Fig-

ure 7 you can see the complete markup code of the

controller component. The db-row component runs

in controller mode (controller="true") and writes

the key-value pairs of the GET request to the wishlist

table (action="store-from-get-request"). With

the db-server component it is noticeable that the

parameter url, which speciﬁes the RESTFul service

endpoint, is not given. In this case the component

assumes that the url matches the path of the src pa-

rameter from which the web components were loaded

(<script src="...">).

7 LIMITATIONS AND

IMPROVEMENTS

In this section, we describe the technical limitations

of our web components and the room for further im-

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

304

provements. These limitations are structured in (1)

look and feel, (2) parameterization and conﬁguration

and (3) security and network.

In Figure 7, we see the database column names,

which are not always intuitive. To overcome this is-

sue, we must dynamically integrate display names for

each column. In addition, the resolution of foreign

keys is currently not yet supported by the component

db-table. This should be optional in future versions.

However, this can already be simulated by the alterna-

tive use of the db-query component and correspond-

ing SQL-join operations. Another point is the ex-

tension of the db-select web component to enable

the selection of multiple entries. This would allow

the manipulation of n : m relationships between data

records.

Support for parameterizable SQL statements

would also be interesting. For example, this would al-

low displaying additional information from other ta-

bles for a speciﬁc data set without using JavaScript

functionality. In this case, the parameters used would

refer to a db-row or db-field component (i.e. a for-

eign key attribute). For the future, we are also plan-

ning a wizard that will make it possible to interac-

tively build the desired HTML tags with the necessary

parameters to be integrated into the HTML pages.

The authentication and authorisation mechanisms

are currently limited because we do not support mech-

anisms like Oauth2 or Open ID connect. The Mi-

crosoft Active Directory connection would be bene-

ﬁcial in an enterprise context. In addition, we need to

implement a detailed RBAC system so that users only

see speciﬁed columns or edit the dataset only if they

have a particular role. Regarding network access, we

have no fallbacks if the web services are unreachable

by the client’s device. This could happen if the user

operates outside the company and the web services

are only reachable in the local area network segment.

8 CONCLUSION AND OUTLOOK

In this paper, we have developed and prototypically

implemented a concept for a client-side, declara-

tive integration of dynamic database content within

HTML pages as a low-code technique. To this end,

a series of components for interaction with relational

databases were developed using web components

technology without needing an individual server-side

scripting language or web framework. On the server

side, we have implemented a RESTful API service

as an interface between the components and the con-

nected databases.

The application spectrum of the components

ranges from the rapid development of a functional

prototype that uses the internal capabilities for creat-

ing, editing and displaying data records to pages that

use the db-row component in conjunction with the

db-field components or external forms can there-

fore implement any layout.

Users of content management systems such as

WordPress can also use the components, as only

HTML pages need to be adapted to integrate database

content. Beside the RESTful service, which is typi-

cally provided by the IT department, no web server

is required, as the components also work with the

browser’s ﬁle URI schema.

Building on this basic functionality, we have iden-

tiﬁed future enhancements such as usability, detailed

security with RBAC and conﬁgurability. These en-

hancements are inﬂuenced by the limitations of our

low-code web components described in the previous

Section 7.

Our current prototype can help solve the chal-

lenges of our described stakeholders, like the shortage

of IT personnel, and empower business developers.

Still, we have to evaluate it with the described stake-

holders in a company environment to evaluate the de-

veloper experience of our low-code package.

REFERENCES

Almaree, K., Bowman, A., Berenice, B., Visser, C., Ber-

goer, D., Fullard, D., Moses, G., Brown, S.-L., Born-

man, J., and Bruwer, J.-P. (2015). The usefulness

of cash budgets in micro, very small and small retail

enterprises operating in the cape metropolis. Expert

Journal of Business and Management, 3(1).

Arora, R., Ghosh, N., and Mondal, T. (2020). Sagitec soft-

ware studio (s3)-a low code application development

platform. In 2020 International Conference on Indus-

try 4.0 Technology (I4Tech), pages 13–17. IEEE.

Bajenaru, A. (2010). Software-as-a-service and cloud com-

puting, a solution for small and medium-sized com-

panies. Bulletin Of The Transilvania University Of

Brasov. Series V: Economic Sciences, pages 173–184.

Boese, E. (2009). An Introduction to Programming with

Java Applets. Jones & Bartlett Learning.

Bohdan, D. (2024). Github: dbohdan/automatic-api . https:

//github.com/dbohdan/automatic- api. (Accessed on

2024-09-16).

Breaux, T. and Moritz, J. (2021). The 2021 software de-

veloper shortage is coming. Communications of the

ACM, 64(7):39–41.

Bubble (2024). Bubble: The full-stack no-code app builder.

https://bubble.io/. (Accessed on 2024-09-16).

Budibase (2024). Github: Budibase/budibase . https:

//github.com/Budibase/budibase. (Accessed on 2024-

09-16).

Enable Business Users to Embed Dynamic Database Content in Existing Web-Based Systems Using Web Components and Generic Web

Services

305

Business Research (2024). Application (large businesses,

small businesses, colleges and universities, govern-

ment, non-proﬁts), regional insights and forecast to

2031. (Accessed on 2024-09-16).

Caspio (2024). Caspio: Low-Code Platform - Build Online

Database Apps. https://www.caspio.com/. (Accessed

on 2024-09-16).

CECE (2017). Informatics Education in Europe: Are We

All In The Same Boat? Technical report, Association

for Computing Machinery, New York, NY, USA.

db2rest (2024). Github: kdhrubo/db2rest . https : / /

github.com/kdhrubo/db2rest. (Accessed on 2024-09-

16).

Eggert, S. and Meier, J. (2010). ERP-Markt

uberblick–107

Systeme im Vergleich. ERP-Manage, 6(3):48–55.

Elshan, E., Dickhaut, E., and Ebel, P. (2023). An investiga-

tion of why low code platforms provide answers and

new challenges. In Hawaii International Conference

on System Sciences (HICSS), Maui, Hawaii.

Florescu, D., Levy, A., and Mendelzon, A. (1998).

Database techniques for the world-wide web: A sur-

vey. ACM Sigmod Record, 27(3):59–74.

Grooss, O. F. (2024). Digitalization of maintenance activi-

ties in small and medium-sized enterprises: A concep-

tual framework. Computers in Industry, 154:104039.

Haug, A., Graungaard Pedersen, S., and Stentoft Arlbjørn,

J. (2011). It readiness in small and medium-sized en-

terprises. Industrial Management & Data Systems,

111(4):490–508.

Herbsleb, J. D. and Grinter, R. E. (1999). Splitting the or-

ganization and integrating the code: Conway’s law re-

visited. In Proceedings of the 21st international con-

ference on Software engineering, pages 85–95.

Hossain, M. (2014). CORS in Action: Creating and con-

suming cross-origin APIs. Manning.

Hyrynsalmi, S. M., Rantanen, M. M., and Hyrynsalmi, S.

(2021). The war for talent in software business-how

are ﬁnnish software companies perceiving and coping

with the labor shortage? In 2021 IEEE International

Conference on Engineering, Technology and Innova-

tion (ICE/ITMC), pages 1–10. IEEE.

Kerwin, M. (2017). The ”ﬁle” URI Scheme. RFC 8089.

May, W. (1999). Information extraction and integration

with ﬂorid: The mondial case study. Technical report,

Citeseer.

Minoli, D. (2008). Enterprise architecture A to Z: frame-

works, business process modeling, SOA, and infras-

tructure technology. Auerbach Publications.

Oracle (2020). Java Client Roadmap Update.

https : / / www.oracle.com / technetwork / java / javase /

javaclientroadmapupdatev2020may - 6548840.pdf.

(Accessed on 2024-09-16).

Oracle (2024). Local Naming Parameters in the

tnsnames.ora File. https : / / docs.oracle.com / en /

database / oracle / oracle - database / 23 / netrf / local -

naming-parameters- in-tns-ora-ﬁle.html. (Accessed

on 2024-09-16).

Peyrott, S. (2024). JWT Handbook. https://auth0.com/

resources/ebooks/jwt-handbook. (Accessed on 2024-

09-16).

Prinz, N., Rentrop, C., and Huber, M. (2021). Low-code

development platforms-a literature review. In AMCIS.

Reese, G. and McLaughlin, B. (2003). Java Database Best

Practices. O’Reilly & Associates, Inc., USA.

Richardson, L., Ruby, S., and Demmig, T. (2007). Web-

Services mit REST. O’Reilly.

Statista (2024). IT-Fachkr

afte nach Qualiﬁkation 2023 —

Statista. https://de.statista.com/statistik/daten/studie/

166070/umfrage/veraenderung- der- qualiﬁkationen-

von- it-spezialisten- in-itk- unternehmen/. (Accessed

on 07/16/2024).

StB (2024). Small and medium-sized enterprises (SME)

- German Federal Statistical Ofﬁce. https : / /

www.destatis.de / EN / Themes / Economic - Sectors -

Enterprises / Enterprises / Small - Sized - Enterprises -

Medium - Sized - Enterprises / ExplanatorySME.html.

(Accessed on 07/11/2024).

Uittenbogaard, B., Broens, L., and Groen, A. J. (2005).

Towards a guideline for design of a corporate en-

trepreneurship function for business development in

medium-sized technology-based companies. Creativ-

ity and innovation management, 14(3):258–271.

van der Schee, M. (2024). PHP-CRUD-API. https://

github.com/mevdschee/php- crud-api. (Accessed on

2024-09-16).

Web (2024). HTML Living Standard. https : / /

html.spec.whatwg.org/dev/. (Accessed on 2024-09-

16).

Webﬂow (2024). Webﬂow: Create a custom website — Vi-

sual website builder. https://webﬂow.com/. (Accessed

on 2024-09-23).

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

306