Dynamische Hilfetexte für PDF-Dokumente - eine Anleitung ganz OHNE JavaScript

Programmieren ohne eine Zeile Code zu schreiben: Alex Kereszturi erklärt Klick für Klick, wie Sie mit Acrobat Pro dynamische Hilfetexte für PDF-Formulare erstellen.

Autor/in Alex Kereszturi
Datum 05.09.2019
Lesezeit 9 Minuten

Hatten Sie auch schon Gewürz-Behälter in Ihrer Gewürzschublade, die so alt waren, dass man die Aufschrift auf dem Etikett nicht mehr lesen konnte? Mussten Sie dann auch raten, was genau im Gläschen ist?

Manchmal geht es mir mit PDF-Formularen ähnlich: Ich habe keine Ahnung, was genau ich in ein bestimmtes Feld einfüllen soll.

Gewürzgläser zu beschriften ist relativ einfach. Formularfelder (ausführlich) zu beschriften kann schon eine kleine Herausforderung werden, was das Layout und die Anordnung der Felder und Hilfetexte anbelangt. Da wäre es doch toll, eigene Hilfetexte dynamisch bei Bedarf ein- und ausblenden lassen können, oder?

Wenn Sie jetzt denken, dass Sie dazu die Hilfe von JavaScript benötigen, haben Sie recht. Wenn Sie denken, dass Sie JavaScript programmieren können müssen, liegen Sie falsch.

Die «Mis En Place»

Wie beim Kochen, wollen wir erst einmal alles bereit machen, was wir für unser kleines Beispiel brauchen:

  • Adobe Acrobat Pro
    Der kostenlose «Adobe Acrobat Reader» kann die hier gezeigten Elemente nicht einfügen, da er «nur» für das Lesen und  Kommentieren von PDF-Dokumenten gedacht ist. Der «Adobe Experience Manager Forms» (früher «Adobe Life Cycle Designer») kann noch um einiges mehr als wir hier brauchen, ist aber komplizierter in der Anwendung.
  • Ein x-beliebiges PDF-Dokument
    Im hier gezeigten Beispiel handelt es sich um ein bestehendes Formular. Wenn Sie wissen wollen, wie ich es erstellt habe, können Sie das in diesem Blogbeitrag  nachlesen.
  • Diese Anleitung

That’s it! Mehr benötigen wir nicht.

Die Aufgabenstellung

Betrachten wir zunächst einmal das Formular.

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript
Auf den ersten Blick scheint alles klar. Bei genauerer Betrachtung stellt sich die Frage: «Was genau muss ich denn in das Adressfeld eintragen?»

Wenn wir den Benutzer mit einem Hilfetext unterstützen möchten, fallen mir dazu drei Möglichkeiten ein:

  1. Man könnte den Hilfetext irgendwo neben das Feld schreiben.
  2. Man könnte den Hilfetext in der sogenannten Quickinfo hinterlegen.
  3. Man könnte rechts neben das Feld ein kleines Info-Icon platzieren welches beim Überfahren mit der Maus (mousover) den entsprechenden Hilfetext anzeigt.

Ersteres finde ich persönlich suboptimal, was die Gestaltung anbelangt.

Zweiteres muss ich – will ich ein barrierefreies PDF – so oder so machen.

Also wechsle ich in den «Formular bearbeiten»-Modus und klicke das entsprechende Feld mit der Maus doppelt an. Dann trage ich «Geben Sie hier die vollständige Adresse inklusive Strasse, Postleitzahl und Stadt an.» ins Feld «Quickinfo» ein:

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Und letzteres ist das Hauptziel dieses Tutorials.

Ein Icon platzieren

Immer noch im Bearbeiten-Modus wähle ich das Werkzeug «Schaltfläche Ok» aus der Werkzeugleiste am oberen Bildschirmrand.

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Danach platziere ich den Button neben dem gewünschten Feld und benenne ihn sinnvoll.

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Ich justiere seine Breite…

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

… und klicke ihn doppelt an, um weitere Einstellungen vornehmen zu können.

Im Tab «Erscheinungsbild» achte ich darauf, dass der Rand «keine Farbe» hat und die Füllung dieselbe Farbe wie der Hintergrund.

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Im Tab «Optionen» stelle ich das Layout auf «Nur Symbol» und wähle mit der Schaltfläche «Symbol auswählen…» ein entsprechendes Icon auf meiner Festplatte aus.

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Damit ist das Hilfe-Icon schon mal platziert.

(Wenn Sie jetzt anmerken, dass vom Info-Icon nichts im «Mis en place» stand, haben Sie Recht und dürfen das Layout auf «nur Text» umstellen sowie das kleine «i» selber ins Feld «Beschriftung» eintragen.)

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Widmen wir uns also dem Hilfetext.

Hilfetext erstellen

Den Hilfetext erstelle ich als mehrzeiliges Textfeld, in dem ich das Werkzeug «Textfeld hinzufügen» wähle und das Textfeld – bitte jetzt nicht erschrecken – mitten auf dem Formular platziere. Wir werden noch sehen warum.

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Das Feld benenne ich in «Hilfetext_Adresse» um und ziehe es relativ gross.

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Wer sich jetzt denkt, dass das nicht wirklich schön ist, darf sich freuen: es wird noch bunter.

Ich klicke das Feld doppelt an, setze im Tab «Allgemein» bei «Schreibgeschützt» einen Haken in das Kontrollkästchen…

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

…im Tab «Erscheinungsbild» stelle ich die Füllfarbe auf Gelb, …

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

… im Tab «Optionen» schreibe ich als Standardwert «Geben Sie hier die vollständige Adresse inklusive Strasse, Postleitzahl und Stadt an.» und aktiviere die Checkbox «Mehrere Zeilen».

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Das Ergebnis gewinnt keinen Design-Preis, ist aber wunderbar auffällig.

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Dennoch klicke ich das Feld noch einmal doppelt an und setze im Tab «Allgemein» im Dropdown «Formularfeld» den Wert auf «Ausgeblendet». Schliesslich wollen wir den Text ja nur bei Bedarf einblenden.

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Now the magic happens

Um dem PDF-Dokument nun beizubringen, den soeben erstellten Hilfetext ein- bzw. wieder auszublenden, benötigen wir etwas JavaScript. Zum Glück müssen wir es nicht selber schreiben, sondern können es bequem zusammenklicken.

Können Sie sich noch an den kleinen Button mit dem Info-Icon erinnern? Ja? Ok, bitte doppelklicken und in den Tab «Aktionen» wechseln.

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Bevor wir jetzt alles Nötige einstellen, kurz zu den Begrifflichkeiten:

  • Aktion
    Die Aktion ist das, was passieren soll. Also z.B. das Einblenden des Hilfetextes. Oder das Ausblenden. Ein- und Ausblenden sind also zwei unterschiedliche Aktionen.
  • Auslöser
    Wie der Name schon sagt, muss hier definiert werden, welches Ereignis die Aktion auslösen – also anstossen – soll. Da wir zwei Aktionen benötigen, brauchen wir auch zwei unterschiedliche Auslöser.

Als Übersicht:

Auslöser Fachbegriff Aktion
haarlinie haarlinie haarlinie
Mit der Maus über das Icon fahren mouseover Hilfetext einblenden
Mit der Maus das Icon wieder verlassen mouseout Hilfetext wieder ausblenden

 

Alles klar? Also, ans Werk!

Ich wähle für die erste Aktion den Auslöser «Maus in Feld» (mouseover) und als Aktion «Feld ein-/ausblenden».

 

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Dann klicke ich auf «Hinzufügen» um diese erste Aktion hinzuzufügen. Damit klar ist, welches Feld gemeint ist und ob es ein- bzw. ausgeblendet werden soll, stelle ich folgendes ein und bestätige mit «OK».

Dynamische Hilfetexte für PDF-Dokumente - OHNE JavaScript

Im unteren Teil des Tab «Aktionen» erscheint jetzt die soeben angelegte Aktion. Leider ist in dieser Übersicht nicht ablesbar, was die Aktion genau macht. Ich könnte die Aktion auswählen und bearbeiten, aber ich habe ja noch eine zweite Aktion anzulegen.

Schaffen Sie das alleine ohne Anleitung?

Genau, die Maus muss dieses mal «aus dem Feld», richtig! Die Aktion bleibt aber eine «Feld ein-/ausblenden»-Aktion.

Welches Feld wählen Sie nach dem Klick auf «Hinzufügen»? Genau, wieder den Hilfetext, sehr gut!

Achtung! Dieses Mal aber bitte das Ausblenden aktivieren!

Et voilà! Fertig ist der dynamische Hilfetext. Probieren Sie das Formular im Vorschau-Modus aus!

Fazit

Wie Sie gesehen haben, können Sie mit Adobe Acrobat Pro relativ einfach programmieren, ohne eine Zeile Code zu schreiben. Ich nenne das liebevoll «programming by clicking».

Mit ein wenig Fantasie und Fleiss können so auch relativ komplexe Interaktionen mit dem Benutzer in ein PDF-Dokument eingebaut werden. Einer meiner Kursteilnehmenden hat es sogar geschafft ein komplettes 1-bis-5-Sterne-Bewertungs-System mit dieser Methode zu erstellen. Ok, wir sind nach Kursende noch 45 min länger geblieben, aber wir haben es geschafft!

Wenn Sie noch etwas weiter ausprobieren wollen, hier drei Dinge, die Sie auf jeden Fall beschnuppern sollten:

  1. Haben Sie im Tab «Aktionen» realisiert, dass sie mehrere Aktionen auf ein und dasselbe Feld setzen können? Das geht mit unterschiedlichen Auslösern. Sie können aber auch denselben Auslöser mit mehr als einer Aktion bestücken.
  2. Wählen Sie als Aktion doch einmal den Eintrag «Menubefehl ausführen» und klicken Sie auf «Hinzufügen». So können Sie Ihren eigenen Drucken- oder Beenden-Knopf erstellen.
  3. Wenn sie nicht nur «by clicking» programmieren wollen: Besuchen Sie bei Digicomp einen JavaScript-Kurs und wählen Sie dann als Aktion «JavaScript ausführen».

Viel Erfolg!

JavaScript-Kurse bei Digicomp


Autor/in

Alex Kereszturi

Alex Kereszturi ist Web Solution Developer der ersten Stunden, Trike-Fahrer und Hobby-Psychologe. Als einer der ersten «Webpulisher SIZ» und als «Adobe Certified Instructor» entwickelt er seit seinem 15. Lebensjahr Lösungen für das WWW, Mobilgeräte und andere Lebenslagen. Er ist seit bald 25 Jahren Kursleiter bei Digicomp, liebt das Sein in der Natur und setzt bei seinen Schulungen auf einen guten Mix aus Information, Praxisübungen und Unterhaltung. Als Inhaber und CEO führt er die Smilecom GmbH als ein kleines aber feines Software-Entwicklungs-Unternehmen und immer wieder ein turbulentes Familienleben mit drei Töchtern.