Feb 17, 2022 4:38:57 PM avatar
Home Edit History fr en

Lutece v6 : Back office Freemarker macros

Introduction

In order to facilitate the migration of templates in the event of a change of framework or CSS framework version, new macros have been developed for the back office. These include facilitating the transition to Bootstrap 4 in the coming months. The new macros are also intended to allow more modularity in their use.

Old macros (<v5)

The following macros still exist in commons.html to transition between old and new macros, but will need to be replaced progressively as you migrate:

  • comboWithParams (replaced by select)
  • comboSortedWithParams (replaced by select)
  • comboWithParamsAndLength (replaced by select)
  • combo (replaced by select)
  • fieldInputText (replaced by formGroup + input)
  • fieldInputPassword (replaced by formGroup + input)
  • fieldTextArea (replaced by formGroup + input)
  • fieldInputWrapper (replaced by formGroup)
  • fieldStaticText (replaced by formGroup + staticText)
  • fieldInputCalendar (replaced by formGroup + inputGroup + inputGroupItem)
  • fieldInputCheckBox (replaced by formGroup + checkBox)
  • fieldInputRadioBox (replaced by formGroup + radioButton)
  • fieldInputCheckBoxInline (replaced by formGroup + checkBox)
  • fieldInputRadioBoxInline (replaced by formGroup + radioButton)
  • fieldInputCombo (replaced by formGroup + select)
  • boxSized (replaced by box)
  • rowBox (replaced by row + columns + box)
  • rowBoxHeader (replaced by boxHeader)
  • headerButtons (replaced by entering parameters in boxHeader)
  • table (rewritten)
  • td (rewritten)

The following macros remain unchanged for the moment:

  • radioImageList
  • checkboxList
  • spell
  • pagination
  • paginationAdmin
  • paginationPageLinks
  • paginationCombo
  • paginationItemCount
  • item_navigation
  • dataTable
  • filterPanel
  • messages
  • tableHeadBodySeparator

Rewritten macros

Buttons

  • actionButtons: rewritten to use new macros

The new macros

Rows and columns

row

To create a new line that will contain the columns. Negative margins of the row component (-15px left and right) keep the alignment.

HTML rendering: 

<div class = "row"> </div>

Calling the macro: 

<@row> </@row>

Macro: 

<#macro row class = '' id = '' params = ''>
<div class = "row <#if class! = ''> $ {class} </#if>" <# if id! = ""> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
<#nested>
</Div>
</#macro>

Settings :

  • class (string)
  • id (string)
  • params (allows to add other attributes)
columns

Bootstrap's 12-column system allows you to distribute your content and make it responsive (see the Bootstrap documentation). The columns are contained in a row.

HTML rendering: 

<div class = "col-xs-12 collar-sm-12 collar-md-12 collar-lg-12">
<p> Your content here ... </p>
</div>

Calling the macro: 

<@columns>
<p> Your content here ... </p>
</@columns>

Macro: 

<#macro columns offsetXs = 0 offsetSm = 0 offsetMd = 0 offsetLg = 0 offsetXl = 0 pushXs = 0 pushSm = 0 pushMd = 0 pushLg = 0 pushXl = 0 pullXs = 0 pullSm = 0 pullMd = 0 pullLg = 0 pullXl = 0 xs = 12 sm = 0 md = 0 lg = 0 xl = 0 id = '' class = '' params = ''>
<div class = "col-xs - $ {xs} <# if sm! = 0> col-sm - $ {sm} </#if> <# if md = 0> col-md - $ {md} </#if> <# if lg! = 0> col-lg - $ {lg} </#if> <# if xl! = 0> col-xl - $ {xl} </#if> <# if offsetXs! = 0> col-xs-offset - $ {offsetXs} </#if> <# if offsetSm! = 0> col-sm-offset - $ {offsetSm} </#if> <# if offsetMd! = 0 > col-md-offset - $ {offsetMd} </#if> <# if offsetLg! = 0> col-lg-offset - $ {offsetLg} </#if> <# if offsetXl! = 0> col-xl -offset - $ {offsetXl} </#if> <# if pushXs! = 0> col-xs-push - $ {pushXs} </#if> <# if pushSm! = 0> col-sm-push- $ {pushSm} </#if> <# if pushMd! = 0> col-md-push - $ {pushMd} </#if> <# if pushLg! = 0> col-lg-push - $ {pushLg} < / # if> <# if pushXl! = 0> col-xl-push - $ {pushXl} </#if> <# if pullXs! = 0> col-xs-pull - $ {pullXs} </#if> <#if pullSm! = 0> col-sm-pull - $ {pullSm} </#if> <# if pullMd! = 0> col-md-pull - $ {pullMd} </#if> <# if pullLg ! = 0> col-lg-pull - $ {pullLg} </#if> <# if pullXl! = 0> col-xl-pull - $ {pullXl} </#if> <# if class! = '' > $ {class} </#if> "<# if id! = ''> id =" $ {id} "</#if> <# if params! = ''> $ {params} </#if >>
<#nested>
</Div>
</#macro>

Settings :

  • xs (int): number of columns to display (mobile). Default 12
  • sm (int): number of columns to display (tablet). Default 0
  • md (int): number of columns to display (tablet / small desktop screen). Default 0
  • lg (int): number of columns to display (large desktop screen). Default 0
  • xl (int): number of columns to display (very large desktop screen). Default 0
  • offsetXs, offsetSm, offsetMd, offsetLg, offsetXl (int): specifies the offset of the element on the grid
  • pushXs, pushSm, pushMd, pushLg, pushXl, pullXs, pullSm, pullMd, pullLg, pullXl (int): rearranges the column order (see: Reorder CSS Columns Using Bootstrap)
  • id (string)
  • class (string)
  • params (add other attributes)

Tableaux

table

HTML : 

<div class="table-responsive">
<table>
<tr>
<td>Your text here...</td>
</tr>
</table>
</div>

Appel de la macro : 

<@table>
<tr>
<td>Your text here...</td>
</tr>
</@table>

Macro : 

<#macro table responsive=true class='' id='' params=''>
<#if responsive>
<div class="table-responsive">
</#if>
<table class="table table-hover table-condensed<#if class!=''> ${class}</#if>" id="${id}"<#if params!=''> ${params}</#if>>
<#nested>
</table>
<#if responsive>
</div>
</#if>
</#macro>

Paramètres :

  • responsive (boolean)
  • class (string) : pour des classes supplémentaires ex : 'table-striped', 'table-bordered'. Les classes 'table-hover' et 'table-condensed' sont incluses par défaut.
  • id (string)
  • params (permet d'ajouter d'autres attributs)
td

HTML : 

<td></td>

Appel de la macro : 

<@td></@td>

Macro : 

<#macro td xs=0 sm=0 md=0 lg=0 xl=0 class='' id='' params=''>
<td class="<#if xs!=0>col-xs-${xs}</#if><#if sm!=0> col-sm-${sm}</#if><#if md!=0> col-md-${md}</#if><#if lg!=0> col-lg-${lg}</#if><#if xl!=0> col-xl-${xl}</#if><#if class!=''>${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</td>
</#macro>

Paramètres :

  • xs (int)
  • sm (int)
  • md (int)
  • lg (int)
  • xl (int)
  • class (string)
  • id (string)
  • params (permet d'ajouter d'autres attributs)

Formulaires

tform

Rendu HTML : 

<form class="form-horizontal" method="post" role="form">
...
</form>

Appel de la macro : 

<@tform>
...
</@tform>

Macro : 

<#macro tform class='form-horizontal' class2='' action='' method='post' name='' id='' role='form' params=''>
<form class="${class}<#if class2!=''> ${class2}</#if>"<#if id!=''> id="${id}"</#if><#if action!=''> action="${action}"</#if><#if method!=''> method="${method}"</#if><#if name!=''> name="${name}"</#if><#if role!=''> role="${role}"</#if><#if params!=''> ${params}</#if>>
<#nested>
</form>
</#macro>

Paramètres :

  • class2 (string) : 'form-inline', 'navbar-form', 'navbar-left', 'search-form'...
  • action (string)
  • method (string) : par défaut 'post'
  • name (string)
  • id (string)
  • role (string) : par défaut 'form'
  • params (string) : (permet d'ajouter d'autres attributs)
Form Components
formGroup

HTML rendering: 

<div class = "form-group">
...
</div>

Calling the macro: 

<@formGroup>
...
</@formGroup>

Macro: 

<#macro formGroup formStyle = 'horizontal' class = '' groupStyle = '' rows = 1 labelKey = '' labelFor = '' labelId = '' helpKey = '' id = '' mandatory = false showLabel = true params = '' >
<div class = "form-group <#if groupStyle! = ''> has - $ {groupStyle} has-feedback </#if> <# if class! = ''> $ {class} </#if>" <#if id! = ''> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
<#if rows = 1>
<#if labelKey! = '' && formStyle = 'horizontal'>
<#assign labelClass = "col-xs-12 col-sm-3 control-label">
<#assign divClass = "col-xs-12 collar-sm-9 collar-md-6 collar-lg-6">
<#elseif formStyle = 'inline'>
<#assign labelClass = ''>
<#else>
<#assign divClass = "col-xs-12 col-sm-offset-3 col-sm-6">
</#If>
<#else>
<#assign labelClass = "col-xs-12">
<#assign divClass = "col-xs-12">
</#If>
<#if labelKey! = ''>
<label class = "$ {labelClass} <# if showLabel = false> sr-only </#if>" for = "$ {labelFor}" <# if labelId! = ''> id = "$ {labelId}" </#if >>
$ {} LabelKey
<#if mandatory = false>

<#elseif mandatory = true>
<@icon style = 'asterisk' />
</#If>
</Label>
</#If>
<#if formStyle = "horizontal">
<div class = "$ {divClass}">
</#If>
<#assign mandatory = mandatory>
<#assign labelFor = labelFor>
<#assign helpKey = helpKey>
<#nested>
<#if class = 'success'>
<@icon style = 'check' class = 'form-control-feedback' />
<#elseif class = 'warning'>
<@icon style = 'warning' class = 'form-control-feedback' />
<#elseif class = 'error'>
<@icon style = 'close' class = 'form-control-feedback' />
</#If>
<#if helpKey! = '' && formStyle! = 'inline'> <span class = "help-block" <#if labelFor! = ''> id = "$ {labelFor} _help" </#if >> $ helpKey {} </span> </#if>
<#if formStyle = "horizontal">
</Div>
</#If>
</Div>
</#macro>

Settings :

  • formStyle (string): The style of the form, according to Bootstrap specifications. Possible options: '', 'inline', 'horizontal', 'navbar-form', 'navbar-left' ... The default option is 'horizontal'
  • class (string): Additional class
  • groupStyle: Optional class to report errors or warnings on form fields. Possible options: 'success', 'warning', 'error'
  • rows (int): This parameter defines whether the label and the field associated with it are on the same line (value: 1) or on two different lines (value: 2). By default the value is 1, and this setting corresponds to most forms of the back office.
  • labelKey (string): Label of the form field contained in the group
  • labelFor (string): Value of the "for" attribute of the label used to link the label to an element of the form
  • labelId (string): Adds an ID on the label of the field
  • helpKey (string): Help text of the form field
  • id (string)
  • mandatory (boolean): Defines whether the form field is mandatory (true / false)
  • showLabel (boolean): Choose whether the label will be visible or not. If it is hidden, it will still be readable by screen readers
  • params (string): (allows to add other attributes)
input

This macro allows to call all types of text input, and file. The type is defined by a simple argument. The inputs must be contained by a formGroup.

HTML: 

<textarea> </textarea>
<input type = "text" class = "form-control" />
<input type = "password" class = "form-control" />
<input type = "email" class = "form-control" />
<input type = "file" class = "form-control" />
<input type = "search" class = "form-control" />
<input type = "number" class = "form-control" />

Calling the macro:

<@input type = 'textarea' />
<@input type = 'text' />
<@input type = 'password />
<@input type = 'email' />
<@input type = 'file' />
<@input type = 'search' />
<@input type = 'number' />

Macro : 

<#macro input name type='text' value='' class='' size='' inputSize=0 maxlength=0 placeHolder='' rows=4 cols=40 richtext=false tabIndex='' id='' mandatory=mandatory disabled=false readonly=false pattern='' params='' title='' min=0 max=0>
	<#if type='textarea'>
		<textarea name="${name}" class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if><#if richtext> richtext</#if>" rows="${rows}" cols="${cols}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if mandatory && !richtext> required</#if><#if labelFor!='' && helpKey!=''> aria-describedby="${labelFor}_help"</#if>><#nested></textarea>
	<#elseif type='text' || type='search' || type='password' || type='email' || type='file' || type='number'>
	<input class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if> " id="${id}" name="${name}" type="${type}" value="${value}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if maxlength &gt; 0> maxlength="${maxlength}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if min!=0> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required</#if><#if labelFor!='' && helpKey!=''> aria-describedby="${labelFor}_help"</#if> />
	<#else><@icon style='warning' />Type not supported
	</#if>
</#macro>

Settings :

  • type (string): text, textarea, text, search, password, email, file, number. The default value is 'text'
  • value (string)
  • class (string)
  • size (string): Bootstrap class determining the size of the text and the field. Possible values: 'sm', 'lg'
  • inputSize (int): the size html attribute
  • maxlength (int)
  • placeHolder (string)
  • rows (int): only for textarea
  • cols (int): only for textarea
  • richtext (boolean): Enables rich text option, only for textarea
  • tabIndex (string)
  • id (string)
  • mandatory (boolean): inherited from the formGroup container
  • disabled (boolean)
  • readonly (boolean)
  • pattern: [A-F] [0-9] {5}
  • params (string)
  • title (string)
  • min (int): parameter compatible with input type = 'number'
  • max (int): parameter compatible with input type = 'number'
checkBox

HTML (vertical checkbox): 

<div class = "checkbox">
<Label>
<input type = "checkbox" />
Label
</Label>
</div>

Calling the macro: 

<@checkBox labelKey = 'Label' />

HTML (horizontal checkbox): 

<label class = "checkbox-inline">
<input type = "checkbox" />
Label
</label>

Calling the macro: 

<@checkBox orientation = 'horizontal' labelKey = 'Label' />

Macro: 

<#macro checkBox name id = '' labelKey = '' labelFor = '' orientation = 'vertical' value = '' tabIndex = '' title = '' disabled = false readonly = false checked = false mandatory = mandatory params = '' >
<#if orientation = 'vertical'>
<div class = "checkbox">
</#If>
<label <#if orientation = 'horizontal'> class = "checkbox-inline" </#if> <# if labelFor! = ''> for = "$ {labelFor}" </#if >>
<input type = "checkbox" id = "$ {id}" name = "$ {name}" <# if value! = "value =" $ {value} "</#if> <# if tabIndex! = ''> tabindex = "$ {tabIndex}" </#if> <# if checked> checked </#if> <# if disabled> disabled </#if> <# if readonly> readonly </#if> <#if params! = ''> $ {params} </#if> />
<#if labelKey! = ''>
$ {} LabelKey
<#else>

</#If>
</Label>
<#if orientation = 'vertical'> </div> </#if>
</#macro>

Settings :

  • name (required)
  • id (string)
  • labelKey (string): label of the check box
  • labelFor (string): value of the "for" attribute of the label, used to link the label to an element of the form
  • orientation (string): the default value is 'vertical'
  • value (string)
  • tabIndex (string)
  • title (string)
  • disabled (boolean)
  • readonly (boolean)
  • checked (boolean)
  • mandatory (boolean): inherited from the formGroup container
  • params (string): (allows to add other attributes)
radioButton

HTML (vertical radio): 

<div class = "radio">
<Label>
<input type = "radio" />
Label
</Label>
</div>

Calling the macro (vertical radio): 

<@radioButton labelKey = 'Label' />

HTML (horizontal radio): 

<label class = "radio-inline">
<input type = "radio" />
Label
</label>

Calling the macro (horizontal radio): 

<@radioButton orientation = 'horizontal' labelKey = 'Label' />

Macro: 

<#macro radioButton name id = '' value = '' labelKey = '' labelFor = '' orientation = 'vertical' tabIndex = '' title = '' disabled = false readonly = false checked = false mandatory = mandatory params = '' >
<#if orientation = 'vertical'>
<div class = "radio">
</#If>
<label <#if orientation = 'horizontal'> class = "radio-inline" </#if >>
<input type = "radio" id = "$ {id}" name = "$ {name}" <# if value! = "value =" $ {value} "</#if> <# if tabIndex! = ''> tabindex = "$ {tabIndex}" </#if> <# if checked> checked </#if> <# if disabled> disabled </#if> <# if readonly> readonly </#if> <#if mandatory> required </#if> <# if params! = ''> $ {params} </#if> />
<#if labelKey! = ''>
$ {} LabelKey
<#else>

</#If>
</Label>
<#if orientation = 'vertical'> </div> </#if>
</#macro>

Settings :

  • name (required)
  • id (string)
  • labelKey (string): radio button label
  • labelFor (string): value of the "for" attribute of the label, used to link the label to the radio button
  • orientation (string): the default value is 'vertical'
  • value (string)
  • tabIndex (string)
  • title (string)
  • disabled (boolean)
  • readonly (boolean)
  • checked (boolean)
  • mandatory (boolean): inherited from the formGroup container
  • params (string): (allows to add other attributes)
select

HTML rendering: 

<select name = 'list'>
...
</select>

Calling the macro: 

<@select name = 'list' />

Macro: 

<#macro select name items = '' default_value = 0 id = name size = '' sort = false multiple = 0 params = '' title = ''>
<select id = "$ {id}" name = "$ {name}" class = "form-control <#if size! =" "> input - $ {size} </#if>" <#if (multiple & gt; 0)> multiple size = "$ {multiple}" </#if> <# if params! = ''> $ {params} </#if> <# if title! = ''> $ {title} </#if >>
<#if items? has_content>
<#if sort = true>
<#list items? sort_by ("name") as item>
<#if default_value = "$ {item.code}">
<option selected = "selected" value = "$ {item.code}" <#if! item.name? has_content> label = "$ {i18n (" portal.util.labelEmpty ")}" </#if >> $ {item.name} </option>
<#else>
<option value = "$ {item.code}" <#if! item.name? has_content> label = "$ {i18n (" portal.util.labelEmpty ")}" </#if >> $ {item.name } </option>
</#If>
</#List>
<#else>
<#list items as item>
<#if default_value = "$ {item.code}">
<option selected = "selected" value = "$ {item.code}" <#if! item.name? has_content> label = "$ {i18n (" portal.util.labelEmpty ")}" </#if >> $ {item.name} </option>
<#else>
<option value = "$ {item.code}" <#if! item.name? has_content> label = "$ {i18n (" portal.util.labelEmpty ")}" </#if >> $ {item.name } </option>
</#If>
</#List>
</#If>
<#else>
<#nested>
</#If>
</Select>
</#macro> ...

Settings :

  • name (required)
  • id: takes the value of name
  • title (string)
  • size (string): Bootstrap class determining the size of the text and the drop-down list. Possible values: 'sm', 'lg'
  • items (int): list of objects passed to the drop-down list.
  • sort (boolean): Sort the list by name. Default is false.
  • default_value (int): default value of the drop-down list.
  • multiple (int): only in case of multiple choices. If the value of multiple is greater than 0, it will be passed to the size attribute of the select.
  • params (string): (allows to add other attributes)

The macro can also be used without passing it from an object list.

progressBar

Works with JQuery script "Complexify".

HTML rendering: 

<div class = "progress">
<div id = "progressbar" class = "progress-bar progress-bar-striped" role = "progressbar">
<div id = "complexity"> 0% </div>
</Div>
</div>

Calling the macro: 

<@progressBar />

Macro: 

<#macro progressBar description = '' id = '' params = ''>
<div class = "progress" <# if id! = ''> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
<div id = "progressbar" class = "progress-bar progress-bar-striped" role = "progressbar">
<div id = "complexity"> 0% </div>
</Div>
</Div>
<#if description! = ''>
<span class = "progress-description"> $ {description} </span>
</#If>
</#macro>

Settings :

  • description (string)
  • id (string)
  • params (string): add other attributes
staticText

This component can be adapted for use in forms to display a non-modifiable fixed value, or outside a form.

HTML: 

<p class = "form-control-static">
...
</p>

Calling the macro: 

<@staticText>
...
</@staticText>

Macro: 

<#macro staticText inForm = true color = '' id = '' params = ''>
    <p class = "<# if inForm> form-control-static </#if> <# if color! =" "> text - $ {color} </#if>" <# if id! = ''> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
        <#nested>
    </P>
</#macro>

Settings :

  • inForm (boolean): defaults to true, to use in a form, adds the class "form-control-static".
  • color (string): allows to specify a color class among the Bootstrap colors (muted / primary / success / info / warning / danger) or those of AdminLTE (red / yellow / aqua / blue / black / light-blue / green / gray / navy / teal / olive / lime / orange / fuchsia / purple / maroon)
  • id (string)
  • params (string): add other attributes
button

HTML: 

<button type = "button" class = "btnbtn-primary">
...
</p>

Calling the macro: 

<@button />

Macro: 

<#macro button name = '' id = '' type = 'button' size = 'sm' color = 'btn-primary' style = 'btn-flat' class = '' params = '' value = '' title = '' tabIndex = '' showTitle = true showTitleXs = true showTitleSm = true showTitleMd = true showTitleLg = true buttonIcon = '' disabled = false iconPosition = 'left' dropdownMenu = false>
<# - Bootstrap 4 transition ->
<#if color = 'btn-secondary'>
<#assign color_temp = 'btn-default'>
<#else>
<#assign color_temp = color>
</#If>

<# - Visibility of button title ->
<#assign showTitleClass = '' />
<#if showTitle = false> <# assign showTitleClass = 'sr-only' /> </#if>
<#if showTitleXs = false> <# assign showTitleClass = showTitleClass + 'hidden-xs' /> </#if>
<#if showTitleSm = false> <# assign showTitleClass = showTitleClass + '' + 'hidden-sm' /> </#if>
<#if showTitleMd = false> <# assign showTitleClass = showTitleClass + '' + 'hidden-md' /> </#if>
<#if showTitleLg = false> <# assign showTitleClass = showTitleClass + '' + 'hidden-lg' /> </#if>

<#if dropdownMenu>
<div class = "dropdown">
</#If>

<button class = "<# if style! = 'close'> btn </#if> <# if size! = '' && style! = 'btn-box-tool'> btn - $ {size} </#if> <# if color_temp! = '' && style! = 'btn-box-tool'> $ {color_temp} </#if> <# if style! = ''> $ {style} </#if> < #if dropdownMenu> dropdown-toggle </#if> <# if class! = ''> $ {class} </#if> "type =" $ {type} "<# if title! = ''> title = "$ {title}" </#if> <# if name! = ''> name = "$ {name}" </#if> <# if id! = ''> id = "$ {id}" </#if> <# if value! = ''> value = "$ {value}" </#if> <# if params! = ''> $ {params} </#if> <# if disabled> disabled </#if> <# if dropdownMenu> data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" </#if >>
<#if buttonIcon! = '' && iconPosition = 'left'> <@ icon style = buttonIcon /> </#if>
<#if showTitleClass! = '' && style! = 'btn-box-tool'> <span class = "$ {showTitleClass}"> </#if> $ {title} <# if showTitleClass! = '' && style ! = 'btn-box tool'> </span> </#if>
<#if buttonIcon! = '' && iconPosition = 'right'> <@ icon style = buttonIcon /> </#if>
<#if dropdownMenu>
<@icon style = 'caret-down' />
</#If>
</Button>

<#if dropdownMenu>
<ul class = "dropdown-menu" <# if id! = ''> aria-labelledby = "$ {id}" </#if >>
<#nested>
</Ul>
</Div>
</#If>
</#macro>

Settings :

  • name (string)
  • id (string)
  • type (string): button (default), submit
  • size (string): to be defined among the choices proposed by Bootstrap (sm or lg). Default "sm"
  • color (string): to be defined among the choices offered by Bootstrap and AdminLTE. Default "btn-primary"
  • style (string): btn-block / btn-flat / close / navbar-toggle / collapsed ... Default "btn-flat"
  • class (string): for any additional class
  • params (string): add other attributes
  • value (string)
  • title (string)
  • tabIndex (string)
  • showTitle (boolean): hide the button label on all screen sizes. Default "true"
  • showTitleXs, showTitleSm, showTitleMd, showTitleLg (boolean): Allows you to hide the label of the button according to the size of the screen. Default "true"
  • buttonIcon (string): name of the icon in the Font Awesome library
  • disabled (boolean)
  • iconPosition (string): left / right. Choose whether the icon appears to the left or right of the button text. Default "left"
  • dropdownMenu (boolean): defaults to false, transforms the button into a drop-down list. Under Bootstrap 3 it is an ul list with li list elements; the macro will change when switching to Bootstrap 4 to pass the container to div and the list elements to links to.
aButton

HTML: 

<a href="" class="btnbtn-primarybtn-flat"> Your link here </a>

Calling the macro: 

<@aButton href = ''> Your link here </@aButton>

Macro: 

<#macro aButton name = '' id = '' href = '' size = 'sm' color = 'btn-primary' style = 'btn-flat' class = '' params = '' title = '' tabIndex = ' 'showTitle = true showTitleXs = true showTitleSm = true showTitleMd = true showTitleLg = true buttonIcon =' 'disabled = false iconPosition =' left 'dropdownMenu = false>
<# - Bootstrap 4 transition ->
<#if color = 'btn-secondary'>
<#assign color_temp = 'btn-default'>
<#else>
<#assign color_temp = color>
</#If>

<# - Visibility of button title ->
<#assign showTitleClass = '' />
<#if showTitle = false> <# assign showTitleClass = 'sr-only' /> </#if>
<#if showTitleXs = false> <# assign showTitleClass = showTitleClass + 'hidden-xs' /> </#if>
<#if showTitleSm = false> <# assign showTitleClass = showTitleClass + '' + 'hidden-sm' /> </#if>
<#if showTitleMd = false> <# assign showTitleClass = showTitleClass + '' + 'hidden-md' /> </#if>
<#if showTitleLg = false> <# assign showTitleClass = showTitleClass + '' + 'hidden-lg' /> </#if>

<a class="btn<#if size!=''> btn - $ {size} </#if> <# if color_temp! = ''> $ {color_temp} </#if> <# if style! = ''> $ {style} </#if> <# if class! = ''> $ {class} </#if> "<# if name! =" name = "$ {name}" </#if> <# if id! = ''> id = "$ {id}" </#if> href = "$ {href}" title = "$ {title}" <# if params! = ''> $ {params} </#if> <# if disabled> disabled </#if> <# if dropdownMenu> data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" </#if >>
<#if buttonIcon! = '' && iconPosition = 'left'> <@ icon style = buttonIcon /> </#if>
<span class = "$ {showTitleClass}"> $ {title} </span>
<#if buttonIcon! = '' && iconPosition = 'right'> <@ icon style = buttonIcon /> </#if>
<#if dropdownMenu>
<@icon style = 'caret-down' />
</#If>
<#nested>
</a>
</#macro>

Settings :

  • name (string)
  • id (string)
  • href (string)
  • size (string): to be defined among the choices proposed by Bootstrap (sm or lg). Default "sm"
  • color (string): to be defined among the choices offered by Bootstrap and AdminLTE. Default "btn-primary"
  • style (string): btn-block / btn-flat / close / navbar-toggle / collapsed ... Default "btn-flat"
  • class (string): for any additional class
  • params (string): add other attributes
  • title (string)
  • tabIndex (string)
  • showTitle (boolean): hide the button label on all screen sizes. Default "true"
  • showTitleXs, showTitleSm, showTitleMd, showTitleLg (boolean): Allows you to hide the label of the button according to the size of the screen. Default "true"
  • buttonIcon (string): name of the icon in the Font Awesome library
  • iconPosition (string): left / right. Choose whether the icon appears to the left or right of the button text. Default "left"
  • dropdownMenu (boolean): defaults to false, transforms the button into a drop-down list
dropdownMenu

HTML: 

<ul class = "dropdown-menu"> Your list here </ul>

Calling the macro: 

<@dropdownMenu> Your list here </@dropdownMenu>

Macro: 

<#macro dropdownMenu class = '' id = '' params = ''>
<ul class = "dropdown-menu $ {class}" <# if id! = ""> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
<#nested>
</Ul>
</#macro>

Settings :

  • class (string)
  • id (string)
  • params (string)
Groupings of components
inputGroup

HTML: 

<div class = "input-group">
Your content here
</div>

Calling the macro: 

<@inputGroup> Your content here </@inputGroup>

Macro: 

<#macro inputGroup size = '' id = '' params = ''>
<div class = "input-group <#if size! =" "> input-group - $ {size} </#if>" <#if id! = ''> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
<#nested>
</Div>
</#macro>

Settings :

  • size (string): sm or lg
  • id (string)
  • params (string)
inputGroupItem

HTML: 

<span class = "input-group-btn">
Your content here
</span>

Calling the macro: 

<@inputGroupItem> Your content here </@inputGroupItem>

Macro: 

<#macro inputGroupItem type = 'btn' id = '' params = ''>
<span class = "input-group - $ {type}" <# if id! = ""> id = "$ {id}" </#if> <# if params! = ''> $ {params} < / # if >>
<#nested>
</Span>
</#macro>

Settings :

  • type (string): btn or addon. Default btn
  • id (string)
  • params (string)
btnGroup

HTML: 

<div class = "btn-group">
Your content here
</div>

Calling the macro: 

<@btnGroup> Your content here </@btnGroup>

Macro: 

<#macro btnGroup size = '' class = '' id = '' params = '' ariaLabel = ''>
<div class = "btn-group <#if size! = ''> btn-group - $ {size} </#if> <# if class! = ''> $ {class} </#if>" role = "group" <# if ariaLabel! = ''> aria-label = "$ {ariaLabel}" </#if> <# if id! = ''> id = "$ {id}" </#if> <#if params! = ''> $ {params} </#if >>
<#nested>
</Div>
</#macro>

Settings :

  • size (string): sm or lg
  • class (string)
  • id (string)
  • params (string)
  • ariaLabel (string)
btnToolbar

HTML: 

<div class = "btn-toolbar">
Your content here
</div>

Calling the macro: 

<@btnToolbar> Your content here </@btnToolbar>

Macro: 

<#macro btnToolbar id = '' params = '' ariaLabel = ''>
<div class = "btn-toolbar" role = "toolbar" <# if ariaLabel! = ''> aria-label = "$ {ariaLabel}" </#if> <# if id! = ''> id = " $ {id} "</#if> <# if params! = ''> $ {params} </#if >>
<#nested>
</Div>
</#macro>

Settings :

  • id (string)
  • params (string)
  • ariaLabel (string)

Icons

icon

HTML: 

<i class = "fa fa-close"> </i>

Calling the macro: 

<@icon style = 'close' />

Macro: 

<#macro icon prefix = 'fa fa-' style = '' class = '' title = '' id = '' params = ''>
  <i class = "$ {prefix} $ {style} <# if class! = ''> $ {class} </#if>" aria-hidden = "true" <# if title! = ''> title = '$ {title}' </#if> <# if id! = ''> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >> </i>
</#macro>

Settings :

  • prefix (string): corresponds to the classes associated with the icon library. Default Font Awesome
  • style (string): this parameter can be used to add a size class (fa-lg, fa-2x, fa-3x, fa-4x, fa-5x)
  • class (string): to add an additional class
  • title (string): add a "title" attribute that appears when you move the mouse over the icon
  • id (string)
  • params (string)

Tabs

tabs

HTML: 

<div class = "nav-tabs-custom"> Your content here </div>

Calling the macro: 

<@tabs> Your content here </@tabs>

Macro: 

<#macro tabs color = '' id = '' params = ''>
<div class = "nav-tabs-custom <#if color! = ''> $ {color} </#if>" <# if id! = ""> id = "$ {id}" </#if > <# if params! = ''> $ {params} </#if >>
<#nested>
</Div>
</#macro>

Settings :

  • color (string): specify the color of the tabs. The classes come from portal_admin.css and take the colors of Bootstrap and AdminLTE: top-danger, top-success, top-warning, top-aqua, top-gray, top-navy, top-teal, top-purple, top -orange, top-maroon, top-black
  • id (string)
  • params (string)
listTabs

This component is a wrapper from AdminLTE.

HTML: 

<ul class = "nav nav-tabs"> Your content here </ul>

Calling the macro: 

<@listTabs> Your content here </@listTabs>

Macro: 

<#macro listTabs type = 'tabs' id = '' params = ''>
<ul class = "nav nav - $ {type}" <# if id! = ""> id = "$ {id}" </#if> <# if params! = ''> $ {params} </#if >>
<#nested>
</Ul>
</#macro>

Settings :

  • type (string): Specify the type. Default tabs
  • id (string)
  • params (string)
tabContent

Accordions

accordionContainer
accordionPanel
accordionHeader
accordionBody

Modals

modal
modalHeader
modalBody
modalFooter

Lists

listGroup
unstyledList
dropdownList

Other components

tag
breadcrumbs
coloredBg

Macros for AdminLTE components

The back office embeds the AdminLTE style sheet, allowing you to use stylized and visually appealing Bootstrap components. These are used in the vast majority of the back office templates of Lutece.

infoBox (AdminLTE)
callout (AdminLTE)
alert (AdminLTE)
box (AdminLTE)
smallBox (AdminLTE)
errorPage (AdminLTE)