K8 Web Kit
Download Web Kit bootstrap 5

Image Support

Docu

Upload 1 image

Docu

To edit data, please login.

To each record of any table you can easily assign pictures. In this example its exactly 1 picuture. The picture library offers you the upload by dropzone and also the "delete" button to remove the image.

1 or multiple images can be added to a table. This is the setting in the datadefinition:

masterdata.upload.enabled=true

In the form you have to prepare an element

To integrate the image upload into the form, the form-wrapper is extended with an image container "pic_ph":

Upload multiple images

Docu

My Form

You can put any elements here. To assign the image catalog you have to specify the basetype and the object key.

To your form or object you can easily assign multiple images. The picture library appends the following elements to your page:

  • headline with delete button
  • the dropzone upload area
  • the image catalog, the pictures are sortable and selectable

datadefinition

  • masterdata
    • upload:{"enable":true}

css

sortable

the html structure look like this:

Each image container gets an "id" like this:

image_{{ID}}

"ID" is the key of the corresponding table.

the ".js_rec_records" are bind to the plugin "sortable". After the drop event the ID-array is send to the server by ajax. The column "sort" of each record get the new position.

Display 1 image in catalog

Docu

In a catalog the first assigned image is displayed. Set the following in the datadefinition:

  • masterdata.upload.enabled=true

The following colums are added to the recordset:

  • image_ID
  • image_file
  • image_orientation
  • image_aspectratio
  • image_width
  • image_height
  • image_count
  • image_array
    • array with the columns above

You can use this columns as placeholder in your html.

HTML

the snippet (masterdata/k8references_1_image.html):

Display image with thumbnail list

Docu

In the big image container the first image is displayed. By a click on an image in the thumbnail list, it is displayed in the image container.

The thumbnail list is placed in an javascript loop element with the following columns:

  • image_array[], used columns
    • image_ID
    • image_file
    • image_orientation
    • image_aspectratio

HTML

the snippet (masterdata/k8references_image_thumbnails.html):

JavaScript

to display the thumbnails by click in the picture frame: