Obrázek

Statický obrázek ve formuláři, například logo nebo schéma.

Popis widgetu `image`

Widget zobrazí obrázek z adresy URL, například logo, schéma nebo fotografii z pole položky. Adresu můžete poskládat z hodnot polí (https://domena/fotky/[Id].jpg), takže každá položka ukáže svůj obrázek. Je to virtuální widget, neukládá se do položky. Nemá nic společného s polem typu Obrázek SharePointu, které obrázek nahrává.

Nastavení widgetu Obrázek: URL nebo šablona a zarovnání

Přidání do formuláře

Na kartě Widgety vyberte Obrázek a přetáhněte ho do sekce (nebo klikněte na „+“). Nový widget má adresu https:// a text pro čtečky „Obrázek“, takže ho nejdřív přepište.

Nastavení v inspektoru

Volba	Vlastnost	Význam	Výchozí
URL nebo šablona obrázku	`imageConfig.urlTemplate`	Adresa obrázku, i s placeholdery `[Pole]`, `{Pole}`, `@Me`, `@Today`.	prázdná
Zarovnání obrázku	`imageConfig.alignment`	`left` (Vlevo), `center` (Střed), `right` (Vpravo).	`center`
Vlastní popisek	`customLabel`	Náhradní text, když není zadán `altText`, a název v chybových hláškách.	„Obrázek“
Šířka v sekci, Viditelné	`colSpan`, `defaultVisible`	Společné volby všech widgetů.	12, ano

Další vlastnosti schématu inspektor nenabízí, nastavíte je v surovém JSON editoru:

Vlastnost	Význam	Výchozí
`imageConfig.altText`	Alternativní text pro čtečky obrazovky. Zároveň se zobrazí jako popisek pod obrázkem. Placeholdery se v něm nevyhodnocují.	prázdný
`imageConfig.maxWidth`	Nejvyšší šířka: číslo (pixely) nebo text jako `"50%"`.	100 % šířky
`imageConfig.maxHeight`	Nejvyšší výška: číslo (pixely) nebo text.	bez omezení
`imageConfig.openInNewTabOnClick`	Kliknutí otevře obrázek v plné velikosti v nové záložce.	`false`

Chování za běhu

Adresa se vyhodnocuje při každé změně polí, která jsou v ní použitá. Obrázek se tedy mění, když uživatel upraví například pole [PhotoUrl].
Ve všech režimech (Nový, Úprava, Zobrazení) se widget chová stejně.
Když je šablona prázdná nebo pole v ní zatím nemá hodnotu, zobrazí se přerušovaný rámeček s nápovědou „název: Není zadána URL adresa nebo pole z výrazu zatím nemá hodnotu“.
Adresa s nepovoleným protokolem se nenačte a widget ukáže chybu. Povolené jsou http, https a relativní cesty (začínající /, ./ nebo ../).
Když se obrázek nepodaří načíst, widget zobrazí chybu s adresou. Po opravě pole se pokusí načíst znovu.

Překlady textů

Přeložit lze customLabel a imageAltText (přepíše altText). Viz Překlady a vícejazyčnost.

Pravidla a skripty

setVisible: zobrazí nebo skryje obrázek.
Obrázek reaguje na pole v šabloně. Chcete-li ho přepínat podle stavu, nastavte pravidlem setValue nebo setExpression pomocné pole s adresou a odkažte se na něj z šablony.

Příklad konfigurace (JSON)

{
  "internalName": "widget_image_foto",
  "customLabel": "Fotografie zaměstnance",
  "fieldType": "image",
  "colSpan": 4,
  "defaultVisible": true,
  "imageConfig": {
    "urlTemplate": "https://intranet.firma.cz/fotky/[Id].jpg",
    "altText": "Fotografie zaměstnance",
    "maxHeight": 160,
    "alignment": "left",
    "openInNewTabOnClick": true
  }
}

Formulář s obrázkem načteným podle pole položky (nahoře) a s chybovým rámečkem u neplatné adresy (dole)

Omezení a tipy

Adresy data: (vložený obrázek v base64) a relativní cesty widget povoluje, stejně jako http a https. Jiná schémata (např. javascript:) widget zablokuje a zobrazí chybovou hlášku. Velké vložené obrázky ale zvětšují konfiguraci i položku, proto raději použijte adresu souboru v knihovně.
Obrázek z SharePointu se zobrazí jen uživatelům, kteří mají k souboru oprávnění. Anonymní adresy fungují pro všechny.
Nastavte maxHeight nebo maxWidth, aby velký obrázek nerozbil rozložení.
Placeholder dosazuje do adresy text tak, jak je. Mezery a diakritiku v hodnotách ošetřete v poli samotném.