Mini Widgets

Images

2.1.1

Order widget

Custom Image

With images, you can load pictures into tables, Kanban, or other widgets. You have numerous settings, from borders to rounding to size settings.

arcCustomImage({
		uniqueId: "ProjektBild"+Nr,
		title: "Logo",
		width: "80px",
		height: "80px",
		backgroundSize: "cover",
        backgroundColor: "",
		style: "", // Hier kannst du eigene CSS Styles hinterlegen.
		radius: "5px",
		borderColor: "",
		link: text(Projekt.'Bild URL') // Hier musst du immer einen shareLink deines Bildes hinterlegen. 
})

General Settings

uniqueId

The uniqueId is assigned individually and should be unique. The reason behind this is: If you create multiple images with different settings on your interface, the styles do not overwrite each other.

uniqueId: "ProjektBild" + Nr // Text in "" + Ninox Nr

title

title: "Logo",

width

With width, you can set the width of the image container.

width: "100%", // Prozent-Werte. Hier: volle Breite.
width: "100px", // Pixel-Werte

height

With height, you can set the height of the image container.

height: "auto", // Automatisch an den Inhalt angepasste Höhe.
height: "300px", // Pixel-Werte

backgroundSize

With backgroundSize, you define the size of the image in the container.

backgroundSize: "cover", // Füllt den Container komplett aus, kann dazu führen, dass das Bild abgeschnitten wird. 
backgroundSize: "contain", // Das Bild wird komplett in dem Container angezeigt. 
backgroundSize: "50%",
backgroundSize: "auto", // Bild wird in der Originalgröße angezeigt. 
backgroundSize: "15px 10px", // Gibt Breite und Höhe in Pixel an.

backgroundColor

With backgroundColor, you can determine the color of the background. This is especially useful when no image is displayed or for images that haven't been adjusted to the total size. It is also possible to make the background transparent.

 backgroundColor: "#1D8C96", // HEX-Code für Farben
 backgroundColor: "transparent", // für einen transparenten Hintergrund

style

For the style parameter, you can add your own CSS styles.

style: "opacity 30%;", // CSS styles