• Type Script Functions
• Add custom content into the headline next to the login
• Result
• Code snippet
• Set the value into the headbar
• Opening/Launching a screen with TypeScript
• Opening screen via a BUTTON
• Opening screen with selecting a card of a DATAVIEW
• Opening screen with selecting a record of a GRID
• Opening a screen with prefilled values
• ABL and OpenEdge
• How to run ABL code

Type Script Functions

Add custom content into the headline next to the login

You can add custom content into the headbar of Build.One

Result

Code snippet

Add the following css code snippte into the src/webui/sass/themes/YOURTHEME/_styles.scss of your theme. You can do here with CSS and HTML whatever you want.

.taskbar-header .panel.dhx_cell_nested_layout::after {
  content: "Ausgewählte Firma: " attr(client-number);
  font-size: 15px;
  color: rgb(216, 216, 230);
  position: absolute;
  top: 50%;
  right: 100px;
  transform: translateY(-50%);
  padding: 5px; /* Füge Padding hinzu, um den Inhalt zu umgeben */
  background-color: rgba(255, 255, 255, 0.3); /* Weißer Hintergrund mit Transparenz */
  border-radius: 3px; /* Optional: Füge abgerundete Ecken hinzu */
}

Set the value into the headbar

You can use the following code snippet to your fronted logic to add specific content here. Think of a dynselect that changes a specific number in a dialog. If you want to add the corresponding number into your headbar than use the following code.

document.querySelector('.taskbar-header .panel.dhx_cell_nested_layout').setAttribute('client-number', '3');

Opening/Launching a screen with TypeScript

Opening screen via a BUTTON

Add the function name to EventClick = #.onButtonPress(eventSource)attribute of the button. Create the following function in your screen.ts file where the form is implemented (via Ribbon-function "</>Open Events file"):

export function onButtonPress(eventSource: akioma.swat.Button) {
  console.log(eventSource);

  const screenNameToOpen  = 'myScreenName';
  const myForm            = <akioma.swat.Form>eventSource.parent;
  const myDataSource      = myForm.dataSource;
  const myRecord          = myDataSource.getCurrentRecord();
  const myId              = myRecord.fieldname_with_unique_identifier; //important: fieldname must be lower-case!

  akioma.swat.App.loadScreen({
    containerName: screenNameToOpen,
    repositionTo: myId
  });
}

Opening screen with selecting a card of a DATAVIEW

Add the function name to EventRowChosen = #.onDataViewChosen(eventSource) attribute of the DataView object. Create the following function in your screen.ts file (via Ribbon-function "</>Open Events file"):

export function onDataViewChosen(eventSource: akioma.swat.DataView) {
  console.log(eventSource);

  const screenNameToOpen  = 'myScreenName';
  const myDataView        = eventSource;
  const myDataSource      = <akioma.swat.DataSource>myDataView.getLink('DATA:SRC');
  const myRecord          = myDataSource.getCurrentRecord();
  const myId              = myRecord.fieldname_with_unique_identifier; //important: fieldname must be lower-case!

  akioma.swat.App.loadScreen({
    containerName: screenNameToOpen,
    repositionTo: myId
  });
}

Opening screen with selecting a record of a GRID

Add the function name to EventRowChosen = #.onGridChosen(eventSource) attribute of the SwatGrid object. Create the following function in your screen.ts file (via Ribbon-function "</>Open Events file"):

export function onGridChosen(eventSource: akioma.swat.Grid) {
  console.log(eventSource);

  const screenNameToOpen  = 'myScreen';
  const myGrid            = eventSource;
  const myDataSource      = <akioma.swat.DataSource>myGrid.dataSource;
  const myRecord          = myDataSource.getCurrentRecord();
  const myId              = myRecord.fieldname_with_unique_identifier; //important: fieldname must be lower-case!

  akioma.swat.App.loadScreen({
    containerName: screenNameToOpen,
    repositionTo: myId
  });
}

Opening a screen with prefilled values

• In this function, you’ll define the mapping, see the example function below
Copy

export function listEntryForeignFieldsProvider(entriesGrid: akioma.swat.Grid) {
  const window = entriesGrid.screen;
  const headDataSource = <akioma.swat.DataSource>window.getObject('dListHd');
  return [{ name: 'SelfDesc', value: `New '${headDataSource.getCurrentRecord()?.selfdesc}' entry` }];
}

1. Here you’ll see that the field SelfDesc will be filled with a combination of test and the selfDesc value from the choosen record

ABL and OpenEdge

How to run ABL code

Ensure that the ABL Extension is installed in your Gitpod Workspace (it will be provided by default): OpenEdge ABL

Create a .p file under src/backend, add a procedure and code you want to run. Save and run it via F2.

Back to Documentation

Back to Home Page