wie kann ich eine Materialliste in mein Formular einfügen

Hallo ,

ich möchte in mein Formular Arbeitsauftrag / Lieferschein ein Materialfeld mit auswählbaren Materialien einfügen. ich habe die Konfigurierbare List verwendet, hier habe ich die Notwendigen Materialien eingefügt ... mir gefällte es nicht wirklich, weil zur Auswahl sollte auch die Mengeneinheit dazugehören, und die Spaltenbreite der Spalte Beschreibung ist gleichgroß wie die Spalte Einh.

Da wir zur Zeit alle Materialien eintippen möchte ich diese Eingabe bei Standards vereinfachen, es sollte ab möglichst die gleiche Optik in der Eingabe und der Ausgabe sein. Ich möchte ein Material auswählen, und die Einheit sollte dann direkt mit ausgewählt sein, des Weiteren würde ich die Spaltenbreite 80/80/300 bevorzugen.

Das Materialfeld "Abdichtung Alsan" wird nur verwendet wenn es in der Mehrfachauswahl ausgewählt wurde. Dann sollte ein Dropdownfeld eingeblendet werden welches die Materialien auflistet mit "Menge" zum eingeben, "Einheit" und "Beschreibung" zum auswählen, die Einheit ist immer von dem entsprechenden Material abhängig Alsan Quaddro = Kg, Pinsel = Stück, Sop Vlies = lfm, Reiniger = Geb., Handschuhe = PAA

Die Überschrift "Materialverbrauch Alsan" und "Menge - Einh. - Beschreibung müssen nicht angezeigt werden.

habt Ihr eine schöne Lösung für mich ? ich bedanke mich schon im Voraus und

mfg Thomas Riedel

Hi Riedel_Thomas,

Thanks for reaching out to Jotform Support. Unfortunately, our German Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Let me walk you through how you can achieve this using Jotform's Configurable List widget and some customization:

1. Use the Configurable List Widget: This widget allows you to create a list where users can add multiple rows of fields. You can define fields such as material name (dropdown), quantity (number), unit (dropdown), and description (dropdown or text).
2. Set Up Fields with Dependencies: To have the unit automatically selected based on the material chosen, you can configure the material dropdown and unit dropdown accordingly. Although the Configurable List widget itself does not support conditional logic inside the widget, you can predefine the unit options or use custom CSS and JavaScript if embedding the form externally.
3. Customize Column Widths: You can adjust the column widths (e.g., 80/80/300) by injecting custom CSS into the widget's Custom CSS tab. This lets you control the width of each column to better fit your layout preferences.
4. Hide Headers: The widget does not show headers by default, but if you want to hide any labels or column headers, you can remove or hide them using CSS customization.
5. Conditional Dropdown Display: For showing a dropdown field only when a specific material is selected in a multiple selection field, you would need to use conditional logic outside the Configurable List widget or create separate fields with conditions to show/hide based on the selection.

Here are some useful tips:

• Define your Configurable List fields using the supported syntax for dropdowns, numbers, and text fields.
• Inject custom CSS to adjust the layout and column widths as you prefer.
• Use conditional logic in the form builder to show or hide fields based on user selections.

This approach will help you simplify material entry, keep the input and output appearance consistent, and allow selection of materials with their corresponding units and descriptions.

Give it a try and let us know if you need any help.

Hallo,
Gerne warte ich einige Zeit auf eine deutschen Mitarbeiter, vielleicht ließt dieser meine Anfrage dann richtig und kann mir dann auch entsprechend helfen. Leider war die Antwort sehr schlecht und hilft mir nicht wirklich weiter.

1. Ich verwende Widget "Konfigurierbare Liste" wörtlich habe ich geschrieben: "ich möchte in mein Formular Arbeitsauftrag / Lieferschein ein Materialfeld mit auswählbaren Materialien einfügen. ich habe die Konfigurierbare List verwendet
2. Einrichten von Feldern mit Abhängigkeiten: hätte Mustafa sich mein Formular angesehen (siehe Link) hätte er festgestellt das ich die Dropdown-Liste "Einh. und Beschreibung" eingefügt habe, ich weiß aber nicht wie ich diese konfiguriere, das jedes Material seine Einheit angezeigt bekommt.
3. Spaltenbreiten anpassen: ich habe in Eigene CSS folgende Werte eingegeben: input.translatable.form-textbox {width: 80px;}
   select.form-dropdown {width: 80px !important;}
   select.form-dropdown {width: 300px !important;}
   Die Spaltenbreite der Dropdownfelder bleibt immer gleich ?!
   wie muss ich die CSS eingeben wenn das erste Dropdownfeld 80px und das zweite Dropdownfeld 300px groß sein soll ?
4. Kopfzeilen ausblenden: wie soll ich die CSS anpassen? damit die Überschrift ausgeblendet wird ?
   Mustafa schreibt "Das Widget zeigt standardmäßig keine Überschriften" bei meinem Formular wird die Überschrift angezeigt, scheinbar ist es Standard.
5. Bedingte Dropdown-Anzeige: Hätte Mustafa sich mein Formular angeschaut oder meine Anfrage richtig gelesen, hätte er gesehen das ich im Formularfeld "Welche Arbeiten wurden ausgeführt" bei auswählen/anklicken von "Abdichtung Alsan" die Bedingung eingefügt habe
   "Wenn Welche Arbeiten wurden ausgeführt ? stimmt überein mit "Abdichtung Alsan" Zeige Materialverbrauch Alsan"
   Das Materialfeld "Abdichtung Alsan" wird nur verwendet wenn es in der Mehrfachauswahl ausgewählt wurde. 

Wie eingangs erwähnt warte ich gerne auf einen deutschen Supporter, scheinbar ist die Übersetztung von Google doch nicht so gut.

mfg Thomas Riedel

Hallo Thomas,

gerne gehe ich auf die einzelnen Punkte im Zusammenhang mit dem Widget „Konfigurierbare Liste“ ein:

Unterschiedliche Spaltenbreiten

Standardmässig übernimmt das Widget für alle Dropdown-Felder die gleiche Breite. Um einzelne Spalten gezielt anzupassen, können Sie die CSS-Selektoren mit nth-child verwenden. Ein Beispiel.

/* Erste Spalte (Dropdown) */

.configurable-list tbody tr td:nth-child(1) select {

width: 80px !important;

}

/* Zweite Spalte (Dropdown) */

.configurable-list tbody tr td:nth-child(2) select {

width: 300px !important;

}

Für Textfelder können Sie statt select den Selektor input einsetzen.

Kopfzeilen ausblenden

Sollten in Ihrem Formular Kopfzeilen erscheinen, können Sie diese per CSS vollständig entfernen:

.configurable-list thead {

display: none !important;

}

Material + Einheit abbilden

Das Widget Konfigurierbare Liste unterstützt keine direkte Abhängigkeit zwischen Dropdown-Feldern. Wenn Sie möchten, dass zu jedem Material automatisch die passende Einheit angezeigt wird, gibt es zwei mögliche Vorgehensweisen:

• Kombinierte Dropdown-Liste: Erstellen Sie eine Liste mit Einträgen wie „Zement – kg“, „Folie – m²“, „Schrauben – Stück“.
• Alternative Widgets: Nutzen Sie separate Dropdown-Felder in Kombination mit Bedingungen, sodass nach Auswahl eines Materials automatisch die passende Einheit angezeigt wird.

Bedingte Anzeige

Ihre Einstellung bei „Welche Arbeiten wurden ausgeführt?“ ist grundsätzlich korrekt. Bitte beachten Sie, dass bei Mehrfachauswahl-Feldern die Bedingung besser mit „enthält“ statt „stimmt überein“ formuliert wird. Dadurch funktioniert die Anzeige auch dann, wenn mehrere Optionen gleichzeitig ausgewählt sind.

Sollten Sie zusätzliche Fragen haben, können Sie uns jederzeit kontaktieren.

https://form.jotform.com/252520932778362

es geht mir immer noch um meine Materialliste. Ich bin der Anmleitung gefolgt ohne ein Ergebnis, ich bin eurere KI gefolgt ebenfalls ohne Ergebnis

Wie muss ich die Zeichenfolge  

/* Erste Spalte (Dropdown) */

.configurable-list tbody tr td:nth-child(1) select {

width: 80px !important;

}

/* Zweite Spalte (Dropdown) */

.configurable-list tbody tr td:nth-child(2) select {

width: 300px !important;

}

in das Feld Eigene Css eingeben ich habe jetzt mehrere Stunden verbracht und komme einfach nicht zum Erfolg

Auch die Synatx für die Kopfzeile funktioniert nicht bei mir

 .configurable-list thead {

display: none !important;

}

Ich find in der Hilfe aber auch nicht wirklich das was ich suche

Hi Thomas,

Setting a specific width for each of the columns of your Configurable List is easy. You will just need to inject a custom CSS code. Let me show you how:

1. First, copy this code:

/* Code to set the Columns width - 30897843 */

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 30% 30% 80% !important;

}

/* Code to hide headers of the colnfigurable list */

.configurable-list-field-label {

  display: none !important;

}

/* Code Ends Here */

2. Open your form in Form Builder, scroll down, and select the Configurable List widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, delete the existing CSS code and paste the code provided above into the CSS Code box.

Give it a try and reach out again if you have any other questions.

Hallo,

Danke für die Lösung es funktioniert. sehr gut :-)

Kann man aus optischen Gründen die Felder gleich der Felder vom Materialverbrauch konfigurieren ?

oder sollte ich das in dem PDF für die Ausgabe versuchen ?

Hi Thomas,

Alligning the field of the two Configurable List is easy. You will just need to chagne the Custom CSS code in the fist Configurable List. Let me walk you through it: 

1. First, copy this code:

/* Code to set the Columns width - 30897843 */

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 30% 30% 80% !important;

}

/* Code Ends Here */

2. Open your form in Form Builder, scroll down, and select the firts Configurable List widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, delete the existing CSS code and paste the code provided above into the CSS Code box.

Result:

Give it a try and reach out again if you have any other questions.