CL_GUI_HTML_VIEWER mit Java-Script

Die Frage ist als "gelöst" markiert. Den entsprechend Beitrag findest du hier.

Getting started ... Alles für einen gelungenen Start.
7 Beiträge • Seite 1 von 1
7 Beiträge Seite 1 von 1

CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von M4rm (ForumUser / 3 / 2 / 0 ) »
Hi zusammen!

Ich verwende in einem Dynpro ein Customcontrol und bau mir dort via
CL_GUI_HTML_VIEWER eine Anzeige für ein HTML. Darin ist pro Text ein Dropdown. Ich würd gern im SAP die ausgewählten Einträge im HTML erhalten.

Das HTML ist wie unten angehängt aufgebaut. Das HTML bau ich mir in einem String mit dem JavaScript auf.
Via FUB DP_CREATE_URL wird ein File erzeugt.
z.B:
SAPHTMLP://htmlviewer.sap.com/TEST.htm

Ich möchte jetzt, bei einer Useraktion die ausgewählten Optionen auslesen.
Hat jemand einen Ansatz oder eine Idee für mich?

Danke schon mal!


-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
-
-
-

<body style="font-family: Arial;">
<div style="display: flex; flex-direction: column; width: 99%;margin:auto;">
<div style="display: flex;flex-direction: row;justify-content: space-between;width:100%;margin:auto;height: 30px;border-bottom: 1px solid grey">
<h3 style="padding: 0; margin: 0;">Bereich1</h3>
<select style="height: 25px;width: 250px;" class="select">
<option value="T1">Text1</option>
<option value="T2">Text2</option>
<option value="T3">Text3</option>
</select>
</div>
<p style="background-color: #d3f6ff;">Ich bin ein Beispieltext </p>
</div>
<!-- -->
<div style="display: flex; flex-direction: column; width: 99%;margin:auto;">
<div style="display: flex;flex-direction: row;justify-content: space-between;width:100%;margin:auto;height: 30px;border-bottom: 1px solid grey">
<h3 style="padding: 0; margin: 0;">Bereich2</h3>
<select style="height: 25px;width: 250px;" class="select">
<option value="T1">Text1</option>
<option value="T2">Text2</option>
<option value="T3">Text3</option>
</select>
</div>
<p style="background-color: #d3f6ff;">Ich bin ebenfalls ein Beispieltext mit mehr Text und mehr Informationen.
Einfach so zum Test!</p>
</div>

<script type="text/javascript">
function getAllValuesFromSelects() {
const values = [];
const listOfSelects = document.getElementsByClassName('select');
for (var i = 0; i < listOfSelects.length; i++) {
const item = listOfSelects;
values.push(item.value);
}
return values;
}

</script>

gesponsert
Stellenangebote auf ABAPforum.com schalten
kostenfrei für Ausbildungsberufe und Werksstudenten


Re: CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von Lukas Sanders (ForumUser / 64 / 7 / 33 ) »
Eventuell ließe sich das mittels SAPEVENT umsetzen (https://help.sap.com/doc/saphelp_nw70/7 ... cache=true). Hierdurch wird ein Event ausgelöst, welches im ABAP-Programm abgefangen werden kann, Parameter können ebenfalls übergeben werden.

Hier noch ein paar Codebeispiele: https://codezentrale.de/tag/sapevent/

Im dritten Beispiel wird das SAPEVENT auch mit einer JavaScript-Methode ausgelöst bzw. mit Parametern ausgestattet.

Folgende Benutzer bedankten sich beim Autor Lukas Sanders für den Beitrag:
M4rm


Re: CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von a-dead-trousers (Top Expert / 4271 / 213 / 1140 ) »
Kurz zusammengefasst:
Um deine ganzen Eingabefelder musst du im HTML einen FORM-Tag einfügen und als Attribute ACTION="SAPEVENT:IRGENDWAS" angeben. Nachdem dann das Formular mittels SUBMIT abgeschickt wurde, wird in SAP der Event SAPEVENT ausgelöst. Da drauf einfach einen Handler definieren und im Parameter POSTDATA stehen dann die Formulardaten drinnen.

P.S.: Das "IRGENDWAS" aus dem Attribute ACTION steht dann übrigens im gleichnamigen Parameter der Handler-Methode. Damit kann man sehr leicht mehrere Formulare auf einer Seite unterscheiden.

Folgende Benutzer bedankten sich beim Autor a-dead-trousers für den Beitrag:
M4rm

Theory is when you know something, but it doesn't work.
Practice is when something works, but you don't know why.
Programmers combine theory and practice: Nothing works and they don't know why.

ECC: 6.18
Basis: 7.50

Re: CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von M4rm (ForumUser / 3 / 2 / 0 ) »
Danke für eure Antworten!!

Ich hab es soweit mal hinbekommen, dass mein Eventhandler der CL_GUI_HTML_VIEWER reagiert, aber keine Werte bekommt.

Über meine Dropdowns hab ich eine form mal gesetzt.
Bei der Änderung des Dropdowns wird das Event SAPEVENT geschossen, und mein Ereignisbehandler reagiert.
Der Parameter ACTION ist auch mit dem Wert "INPUT_FIELDS" befüllt.
Jedoch die GETDATA, POSTDATA und QUERY_TABLE geben nichts retour.
Ziel ist die ID des selects (SELECT1) und der ausgewählte Wert (z.B.:Header1)
zurückzugeben.

Mein HTML sieht so aus:
<head><meta charset="UTF-8"><meta name="description" content="Free Web tutorials"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokumentinhalt</title>
</head>

<body style="font-family: Arial;">
<div style="display: flex; flex-direction: column; width: 99%;margin:auto;">
<div style="display: flex;flex-direction: row;justify-content: space-between;width:100%;margin:auto;height: 30px;border-bottom: 1px solid grey">
<h3 style="padding: 0; margin: 0;">Dropdown 1</h3>

<form name="INPUT" id="val" accept-charset="utf-8" method="POST" action="SAPEVENT:INPUT_FIELDS">
<select form="val" id="SELECT1" style="height: 25px;width: 250px;" class="select" onchange="this.form.submit()">
<option value="keine Auswahl">keine Auswahl</option>
<option value="Header1">Header1</option>
<option value="Header2">Header2</option>
</select>
</form>
</div>
<p style="background-color: #d3f6ff;">Ich bin ein langes langes lange langes Langtextfeld
Test Test Test TEst Test test test test </div></body></html>

Re: CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von a-dead-trousers (Top Expert / 4271 / 213 / 1140 ) »
Deinem SELECT fehlt das NAME-Attribute und ein FORM-Attribute gibt es glaub ich nicht.

Ich glaub du hast generell einen Denkfehler im HTML:
Das FORM-Tag fasst ein oder mehrere Eingabefelder zusammen alleine nur indem es sie umschließt. Das bedeutet, dass das FORM keinen Bezug zu einem Element herstellen muss und umgekehrt muss auch das Eingabefeld keinen Bezug zum Formular herstellen indem es sich befindet. Das wird alles durch die Hierachie im HTML abgebildet. FORM NAME=INPUT und ID=VAL bzw. SELECT FORM=VAL sind somit sinnlos.
Theory is when you know something, but it doesn't work.
Practice is when something works, but you don't know why.
Programmers combine theory and practice: Nothing works and they don't know why.

ECC: 6.18
Basis: 7.50

Re: CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von M4rm (ForumUser / 3 / 2 / 0 ) »
Danke schön!
Mit dem Attribute Name im Select funktioniert die Übergabe der Daten.
Das Form habe ich ebenfalls noch ausgeputzt und die ID/Name sind entfernt.

Funktioniert perfekt so!
Dafür steht ein Bier in Wien bereit :)

lg

Re: CL_GUI_HTML_VIEWER mit Java-Script

Beitrag von a-dead-trousers (Top Expert / 4271 / 213 / 1140 ) »
M4rm hat geschrieben:
14.12.2020 09:17
Dafür steht ein Bier in Wien bereit :)
Schicks nach Graz. 😉
Komm leider nicht so schnell in die Hauptstadt.
Theory is when you know something, but it doesn't work.
Practice is when something works, but you don't know why.
Programmers combine theory and practice: Nothing works and they don't know why.

ECC: 6.18
Basis: 7.50

Seite 1 von 1

Vergleichbare Themen

4
Antw.
3684
Views
HTML-Viewer-Control verändert HTML-Quelltext
von paramedic78 » 07.01.2013 14:50 • Verfasst in ABAP® für Anfänger
1
Antw.
1973
Views
XML mit HTML-Viewer?
von ernst » 10.12.2004 13:12 • Verfasst in ABAP Objects®
3
Antw.
4435
Views
Komprimieren von HTML im Viewer
von a-dead-trousers » 23.12.2011 10:17 • Verfasst in ABAP Objects®
1
Antw.
1498
Views
HTML-Viewer Formulare
von Stefan7777 » 21.04.2006 11:19 • Verfasst in ABAP® Core
0
Antw.
1478
Views
Dynamische Dokumente und HTML-Viewer
von webster » 02.01.2007 14:01 • Verfasst in ABAP Objects®

Über diesen Beitrag



Die Frage ist als "gelöst" markiert. Den entsprechend Beitrag findest du hier.

Unterstütze die Community und teile den Beitrag für mehr Leser und Austausch

Newsletter Anmeldung

Keine Beiträge verpassen! Wöchentlich versenden wir lesenwerte Beiträge aus unserer Community.
Die letzte Ausgabe findest du hier.
Details zum Versandverfahren und zu Ihren Widerrufsmöglichkeiten findest du in unserer Datenschutzerklärung.

Unbeantwortete Forenbeiträge

Zwischensumme Adobe Forms
vor 4 Tagen von Lucyalison 1 / 71
Group Items auf einer Filterbar
vor einer Woche von Bright4.5 1 / 111
tRFC Transaktionen SM58
vor 4 Wochen von A6272 1 / 141