How does one reference a local icon in xlsx form?

Technical Support Development
1

As mentioned in the best practices summary page we would like to add a leading icon to the various section headers.

From a xlsx doc, how would one go about referencing the icon files defined in the config/*/resources folder and satisfy the use case?

2

Unfortunately there is currently no way to directly reference config/*/resources from a form. Instead, form images have to be defined on a form-by-form basis. Here are the options that I know of for displaying an image in a summary note label:

  1. Font-Awesome icon - any icon from Font Awesome v4 should be usable
  2. Embedded SVG - Can just include any custom SVG code in the xlsx label text
  3. Attached image file - Using an actual image file (e.g. a .png image) within a note label requires a small extra work-around
    • Technically, to attach an image an xform, you have to reference the image in an image column. However, once you have loaded the image via the image column for one field (and that field does not have to be relevant) you can reference the image from other note labels in the form.
type name label::en image appearance relevant
begin group summary Summary: field-list summary
note fa_header <i class=fa fa-user></i>Patient h1 green
note svg_header <i class=fa><svg height=1em xmlns=http://www.w3.org/2000/svg viewBox=0 0 30 30><g><path d=M28.56,9.23,24,1.34a2.27,2.27,0,0,0-3.94,0l-4.61,8a2.27,2.27,0,0,0,2,3.41h9.24a2.27,2.27,0,0,0,2.25-2.27A2.24,2.24,0,0,0,28.56,9.23ZM22,2.91A1,1,0,0,1,23.1,4l-.54,4.2a.52.52,0,0,1-.52.52.5.5,0,0,1-.53-.52L21,4A1,1,0,0,1,22,2.91Zm.77,8.23a1.1,1.1,0,0,1-.77.32,1.12,1.12,0,0,1-.78-.32,1.11,1.11,0,0,1,0-1.56A1.12,1.12,0,0,1,22,9.26a1.1,1.1,0,0,1,.77,1.88Z fill=#ffffff/><path d=M10.71,9.38A12.12,12.12,0,0,0,7.84,6.2a3.34,3.34,0,0,0-2.38-.41C4.3,6,3.6,7.46,3,8.35L1,11.06l0,0a1,1,0,0,0,.18,1.35l3.6,2.94a1,1,0,0,0,1.17,0c-.24,1-3.65,10.61-3.7,10.75H6.16L6.3,29a1,1,0,0,0,2.06,0l.14-2.78H12c0-.26-.35-5.17-.32-5.74s.64-.91,1-1.26a5.49,5.49,0,0,0,1-1.41,4.23,4.23,0,0,0,.36-1.49,6.22,6.22,0,0,0-.71-3A22.56,22.56,0,0,0,10.71,9.38ZM6,13.85,3.21,11.56,5.3,9.15c.15.66.3,1.33.46,2A11,11,0,0,1,6.14,14C6.1,14,6.08,13.89,6,13.85Z fill=#ffffff/><path d=M8.89,5.48a2.7,2.7,0,0,0,2.68-2.73,2.69,2.69,0,1,0-5.37,0A2.71,2.71,0,0,0,8.89,5.48Z fill=#ffffff/></g></svg></i>Danger Signs h1 yellow
note png_header <i class=fa><img data-media-src=images/happy.png style=display:inline></i>Good news h1 blue
end group summary
note import_happy happy.png false()

image

3 Likes