Picture

The Picture widget displays an image.

Image of guitar with border and padding properties set, in Chrome

Widget Summary
Logical widget name:	Picture Picture_updatable
Maps to physical widget:	`image`
Default definition:	`image(clientsyntaxcheck=false)[syntax=ned,npr]` `image(clientsyntaxcheck=false)[syntax=npr]`
Supported triggers and properties:	See image. It also supports the following Uniface style attributes: `-ufld-no-image-` `-ufld-broken-image-link-`
Use for:	Image fields

Description

The value of the field can be an image in the database, on the file system, a URL, or a glyph. However, if the value of the field is to be set dynamically on the client using the JavaScript API, the Data Type must be Image (url).

The Picture widget comes in two versions:

Picture—field value cannot be modified at runtime. The field syntax is set to NED, NPR (non-editable and no prompt) in usys.ini.
Picture_updatable—field value can be changed at runtime using the Uniface JavaScript API (setValue()). The field syntax is set only to NPR (no prompt)

Widget Property Restrictions

The following restrictions apply:

It is not possible to set the html:src property for this widget. To change an image, you must change the field value.

Styling an Empty Field or Broken Image Link

If the Picture field is empty (that is, no URL is specified), an empty space is displayed. If you prefer to represent this empty picture in another way, you can use the CSS class -ufld-no-image-. For example, you can use this class to specify an alternative background image that cannot be tiled across the background and is centered in the field:

.-ufld-no-image- 
 { 
  background-image: url("../images/emptyImage.png");
  background-repeat: no-repeat;
  background-position: center center; 
 }

Alternatively, you could suppress display of the field entirely:

.-ufld-no-image- 
 { 
 display: none 
}

Similarly, if the field contains a link to an image that cannot be found on the web server, you can use the -ufld-broken-image-link- to define an alternative image. For example:

.ufld-broken-image-link 
  { 
   background-image: url("../images/brokenImage.png");   
   background-repeat: no-repeat; 
   background-position: center center; 
  }