CL_GUI_HTML_VIEWER mit Java-Script
Die Frage ist als "gelöst" markiert. Den entsprechend Beitrag findest du hier.
7 Beiträge
•
Seite 1 von 1
7 Beiträge
Seite 1 von 1
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>
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
kostenfrei für Ausbildungsberufe und Werksstudenten
Beitrag
von Lukas Sanders (ForumUser / 68 / 7 /
34
)
»
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.
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
Beitrag
von a-dead-trousers (Top Expert / 4395 / 223 /
1182
)
»
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.
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
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
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>
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>
Beitrag
von a-dead-trousers (Top Expert / 4395 / 223 /
1182
)
»
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.
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
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
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
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
Beitrag
von a-dead-trousers (Top Expert / 4395 / 223 /
1182
)
»
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
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.
Antw.
4082
Views
Views
HTML-Viewer-Control verändert HTML-Quelltext
von paramedic78 » 07.01.2013 14:50 • Verfasst in ABAP® für Anfänger
von paramedic78 » 07.01.2013 14:50 • Verfasst in ABAP® für Anfänger
3
Antw.
Antw.
4677
Views
Views
0
Antw.
Antw.
935
Views
Views
Frage die ABAP Experten
Ü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
Aktuelle Forenbeiträge
Nach Transport von Stellen über RHMOVE30 nur Planvariante "nie verwenden"
vor 2 Tagen von DeathAndPain 4 / 1085
vor 2 Tagen von DeathAndPain 4 / 1085
Newsletter Anmeldung
Keine Beiträge verpassen! Wöchentlich versenden wir lesenwerte Beiträge aus unserer Community.Die letzte Ausgabe findest du hier.
Aktuelle Forenbeiträge
Nach Transport von Stellen über RHMOVE30 nur Planvariante "nie verwenden"
vor 2 Tagen von DeathAndPain 4 / 1085
vor 2 Tagen von DeathAndPain 4 / 1085