Goobi workflow
Documentation homeGoobi workflow PluginsGoobi workflow Digests
English
English
  • Overview
    • Goobi workflow Handbook
    • Overview of documentation
    • What is Goobi?
  • Users
    • Goobi for Users
    • The basics
      • Logging in
      • Menu
      • Logging out
      • Switch between available languages
      • Help function
      • Personal settings
      • Changing your password
      • My tasks
      • Processes
      • How to find a process
      • How to create a new process
      • Edit task details
    • How different user groups work with Goobi
      • Scanning
      • Quality control
      • Manual script steps and plugin steps
      • Automatic script-run steps
      • Metadata processing
      • Export to the DMS
    • Metadata Editor
      • User interface
        • Structure tree
        • Page display
        • Menu options
      • Metadata indexing
        • Pagination
        • Structuring
          • Create new structure element
          • Moving structure elements
          • Copying structure elements from other processes
      • Modifying and verifying data
        • Subsequent changes to pagination
        • Uploading files
        • Downloading files
        • Server-based exports
        • Server-based imports
      • Edit OCR results
      • Overview of the keyboard combinations
  • Management
    • Goobi Management
    • Structure of the extended user interface
    • Rulesets
    • LDAP groups
    • Users
    • User groups
    • Processes
      • Searching processes
      • Activity
      • Activities for hit lists
      • GoobiScript
    • Variables
    • Harvester
  • Administration
    • Goobi Administration
    • File system
      • Global directory structure
        • ‘config’ sub-directory
        • ‘import’ sub-directory
        • ‘metadata’ sub-directory
        • ‘plugins’ sub-directory
        • ‘rulesets’ sub-directory
        • ‘scripts’ sub-directory
        • ‘xslt’ sub-directory
      • Directory structure of the application
      • Integrating external storage
      • Integration of S3 as storage
    • Services
      • MySQL database
      • Apache Tomcat servlet container
      • User authentication using LDAP
      • File system access using Samba
    • Exporting to digital libraries
      • Technical data
      • Mets parameters
      • Mets file groups
      • Export configuration in the Goobi configuration file
    • Working with the intranda Task Manager
    • Automatic workflow steps
      • Example combination for an automatic script task
      • Migration of technical data to METS files
      • Automatic image deletion
    • Configuration files
      • goobi_activemq.xml
      • goobi_config.properties
      • goobi_digitalCollections.xml
      • goobi_exportXml.xml
      • goobi_mail.xml
      • goobi_metadataDisplayRules.xml
      • goobi_normdata.xml
      • goobi_opac.xml
      • goobi_opacUmlaut.txt
      • goobi_processProperties.xml
      • goobi_projects.xml
      • goobi_rest.xml
      • goobi_webapi.xml
      • messages_xx.properties
      • config_contentServer.xml
    • Installation guide
      • Installation guide - Ubuntu 20.04
    • Update guide
      • Preparation of an update
      • Update steps
        • 2020
        • 2021
        • 2022
        • 2023
        • 2024
        • 2025
    • Authentication options
      • Authentication via the database
      • Authentication via HTTP header
      • Authentication via OpenID Connect
    • Use cases
      • Create thumbnails for accelerated image display
      • Handling of 3D Objects
      • Export of 3D-Objects into the Goobi viewer
  • Developer
    • Setting up a development environment
      • Preparatory work
      • Setting up Eclipse
      • Resetting the data
      • Best practice for developing Goobi and working with Eclipse
    • Using the REST API
    • Snippets for the development on Goobi workflow
      • HTML
      • JavaScript
Bereitgestellt von GitBook
Auf dieser Seite
  • Form components
  • Text field (single-line)
  • Text field (multiline)
  • Selection menu (simple selection)
  • Selection menu (multiple selection)
  • Upload file
  • Checkboxes
  • Radio-Buttons
  • Form groups
  • Form group (three-column)
  • Form group (two-column)
  • Boxes
  • Standard Box
  • Standard Box (extendable and collapsible)
  • Box (grey)
  • Box (white)
  • Box (complete)
  • Buttons
  • Button Toggle
  • Button with AJAX Loader
Als PDF exportieren
  1. Developer
  2. Snippets for the development on Goobi workflow

HTML

Form components

Text field (single-line)

The attribute for="..." for the label is optional.

<!-- INPUT TEXT -->
<div class="form-group">
    <label for="exampleInputText">Textfeld</label>
    <input type="text" id="exampleInputText" class="form-control" placeholder="Placeholder Text" />
</div>

Text field (multiline)

The attribute for="..." for the label is optional.

<!-- INPUT TEXTAREA -->
<div class="form-group">
    <label for="exampleInputTextarea">Textarea</label>
    <textarea id="exampleInputTextarea" class="form-control"></textarea>
</div>

Selection menu (simple selection)

The attribute for="..." for the label is optional.

<!-- SELECT MENU -->
<div class="form-group">
    <label for="exampleFormControlSelect1">Select Menü</label>
    <div class="form-control form-control--select">
        <select id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
</div>

Selection menu (multiple selection)

The attribute for="..." for the label is optional.

<!-- MULTISELECT MENU -->
<div class="form-group">
    <label for="exampleFormControlSelect2">Multiselect Menü</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

Upload file

The attribute for="..." for the label does not have to be set. The attributes data-before and data-after can be given the texts for the input fields by means of a message key method #{msgs.[einMessageKey]}.

<!-- FILE -->
<label class="form-control form-control--file">
    <input type="file" id="inputTypeFileId" name="inputTypeFile">
    <span class="form-control--file-custom" data-before="[Text für before]" data-after="[Text für after]"></span>
</label>

Checkboxes

By default, the checkboxes are listed in a horizontal row. The attribute for="..." for the label must be set so that the correct checkbox is selected.

<!-- INPUT CHECKBOX -->
<div class="form-check">                                
    <label for="defaultCheck1">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <span>
            <i class="fa fa-square-o" aria-hidden="true"></i>
            <i class="fa fa-check-square-o" aria-hidden="true"></i>
        </span>
        Default checkbox
    </label>
    <label for="defaultCheck2">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
        <span>
            <i class="fa fa-square-o" aria-hidden="true"></i>
            <i class="fa fa-check-square-o" aria-hidden="true"></i>
        </span>
        Default checkbox
    </label>
</div>

If you want them to be arranged one below the other, add the CSS class form-check to the CSS class form-check--block.

<!-- INPUT CHECKBOX BLOCK -->
<div class="form-check form-check--block">...</div>

Radio-Buttons

By default, the radio buttons are listed in a horizontal row. The attribute for="..." for the label must be set so that the correct radio button is selected.

<!-- INPUT CHECKBOX -->
<div class="form-check">                                
    <label for="defaultRadio1">
        <input class="form-check-input" type="radio" value="" id="defaultRadio1">
        <span>
            <i class="fa fa-circle-o" aria-hidden="true"></i>
            <i class="fa fa-check-circle-o" aria-hidden="true"></i>
        </span>
        Default checkbox
    </label>
    <label for="defaultRadio2">
        <input class="form-check-input" type="radio" value="" id="defaultRadio2">
        <span>
            <i class="fa fa-circle-o" aria-hidden="true"></i>
            <i class="fa fa-check-circle-o" aria-hidden="true"></i>
        </span>
        Default checkbox
    </label>
</div>

If you want them to be arranged one below the other, add the CSS class form-check to the CSS class form-check--block.

<!-- INPUT CHECKBOX BLOCK -->
<div class="form-check form-check--block">...</div>

Form groups

Form group (three-column)

The attribute for="..." for the label is optional. The label can also be replaced by a <span>...</span>.

<div class="form-group form-group--flex">
    <div class="row justify-content-between">
        <div class="col-3">
            <label for="exampleInputText">Form Group Flex</label>
        </div>
        <div class="col-7">
            <input type="text" id="exampleInputText" class="form-control" placeholder="Placeholder Text" />
        </div>
        <div class="col-2">
            <button type="button" class="btn btn--icon-light">
                <i class="fa fa-search" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

Form group (two-column)

The attribute for="..." for the label is optional. The label can also be replaced by a <span>...</span>.

<div class="form-group form-group--flex">
    <div class="row justify-content-between">
        <div class="col-3">
            <label for="exampleInputText">Form Group Flex</label>
        </div>
        <div class="col-9">
            <input type="text" id="exampleInputText" class="form-control" placeholder="Placeholder Text" />
        </div>
    </div>
</div>

Boxes

Boxes are blue by default and are not collapsible or expandable. The colour and functionality can be changed by supplementary CSS classes. The area module__box-title-actions is optional.

Standard Box

<!-- MODULE BOX -->
<div class="module module__box">
    <!-- BOX TITLE -->
    <div class="module__box-title">
        <h3>
            <i class="fa fa-bars" aria-hidden="true"></i>
            <span>STANDARD BOX</span>
            <button type="button" class="btn btn--clean" data-toggle="box-body">
                <i class="fa fa-angle-up fa-lg" aria-hidden="true"></i>
            </button>
        </h3>
        <!-- BOX TITLE ACTIONS -->
        <div class="module__box-title-actions">
            <button type="button" class="btn btn--icon">
                <i class="fa fa-refresh" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <!-- BOX BODY -->
    <div class="module__box-body">
        CONTENT GOES HERE...
    </div>
</div>

Standard Box (extendable and collapsible)

<!-- MODULE BOX COLLAPSABLE -->
<div class="module module__box module__box--collapsable">
    SAME AS MODULE BOX...
</div>

Box (grey)

<!-- MODULE BOX GREY -->
<div class="module module__box module__box--gray">
    SAME AS MODULE BOX...
</div>

Box (white)

<!-- MODULE BOX WHITE -->
<div class="module module__box module__box--white">
    SAME AS MODULE BOX...
</div>

Box (complete)

Applies to all colour options.

<!-- MODULE BOX COMPLETE -->
<div class="module module__box module__box--collapsable module__box--white">
    SAME AS MODULE BOX...
</div>

Buttons

<!-- BUTTON DEFAULT -->
<button type="button" class="btn btn--default">Button default</button>
<!-- BUTTON SUCCESS -->
<button type="button" class="btn btn--success">Button success</button>
<!-- BUTTON DANGER -->
<button type="button" class="btn btn--danger">Button danger</button>
<!-- BUTTON FULL -->
<button type="button" class="btn btn--full">Button full</button>
<!-- BUTTON CLEAN -->
<button type="button" class="btn btn--clean">Button clean</button>
<!-- BUTTON INACTIVE -->
<button type="button" class="btn btn--inactive">Button inactive</button>
<!-- BUTTON GRAY -->
<button type="button" class="btn btn--gray">Button gray</button>
<!-- BUTTON LINK -->
<button type="button" class="btn btn--link">Button link</button>
<!-- BUTTON HIDDEN -->
<button type="button" class="btn btn--hidden">Button hidden</button>
<!-- BUTTON VISUALY HIDDEN -->
<button type="button" class="btn btn--vhidden">Button visualy hidden</button>
<!-- BUTTON ICON -->
<button type="button" class="btn btn--icon">
    <i class="fa fa-refresh" aria-hidden="true"></i>
</button>
<!-- BUTTON ICON GRAY -->
<button type="button" class="btn btn--icon-gray">
    <i class="fa fa-refresh" aria-hidden="true"></i>
</button>
<!-- BUTTON ICON LIGHT -->
<button type="button" class="btn btn--icon-light">
    <i class="fa fa-refresh" aria-hidden="true"></i>
</button>
<!-- BUTTON ICON WHITE -->
<button type="button" class="btn btn--icon-white">
    <i class="fa fa-refresh" aria-hidden="true"></i>
</button>
<!-- BUTTON ICON BLUE -->
<button type="button" class="btn btn--icon-blue">
    <i class="fa fa-refresh" aria-hidden="true"></i>
</button>

Button Toggle

There is one more special feature for a button. If the CSS class btn--toggle is assigned to a button and a <div /> is set as the next element, this DIV can be expanded and collapsed.

<!-- BUTTON TOGGLE -->
<button type="button" class="btn btn--icon btn--toggle">
    <i class="fa fa-exchange" aria-hidden="true"></i>
    Button toggle
</button>
<div>
    CONTENT GOES HERE...
</div>

Button with AJAX Loader

Another special button is activated by the CSS class btn--loader. If this class is assigned, an animated loader is displayed in the clicked button during an AJAX request <f:ajax /> and hidden again after the request is completed.

<h:commandLink
    id="myActionButton"  
    styleClass="btn btn--gray btn--loader"
    action="#{myBean.myMethod}"
    title="myButtonTitle">
    <i class="fa fa-search" aria-hidden="true"></i>
    <span class="btn-ajax-loader" aria-hidden="true">
        <img src="template/img/goobi/ajaxloader2.gif" alt="Ajax Button Loader" />
    </span>
    <f:ajax execute="@form" render="myRenderArea" />
</h:commandLink>
VorherigeSnippets for the development on Goobi workflowNächsteJavaScript

Zuletzt aktualisiert vor 5 Monaten

The form components listed above can be used in the form groups. The columns (col) are to be used according to the rules. The following examples are designed for two- and three-column form groups.

There are several types of buttons, all of which have the CSS class btn as their parent class. The modifications of the buttons are controlled by additional CSS classes. The icons in the buttons can be arbitrarily replaced by an icon from the library of .

Bootstrap 4 Grid
Font Awesome 4