HTML Element

This element allows you to add generic HTML anywhere in your application. In HTML the following variables are available:

  • “application” (Entity Application),

  • “entity” (Entity HTMLElement)

  • and “configuration”.

With these you can for example insert an image into the application.

../../../_images/html_result_application1.png

Configuration

You might want to add an image to your application:

<img src='https://mapbender.org/fileadmin/mapbender/resources/images/logos/Mapbender-Logo.svg' height='60px'>
../../../_images/html1.png
  • Title: Title of the element. The title will be listed in “Layouts”. It will be indicated if “Show label” is activated.

  • Content: Content of the HTML-element. The variables: “application”, “entity” und “configuration” are available in the content.

  • Classes: html-element-inline, my-special-css-class

Configuration: Examples

Add variables into a HTMl-element:

In Mapbender, it is possible to work with variables in applications.

Further information: Reference documentation on standard variables in twig: https://symfony.com/doc/2.8/templating/app_variable.html

Examples:

Variable “application.title”

The application manager shows our application like this:

../../../_images/html_example_application.title_application1.png

First, we add the HTML-element - as mentioned before, this happens by clicking the + -button. To integrate the title of your application into the element, the variable “application.title” is required.

../../../_images/html_example_application.title_dialog1.png

In this example, the title of the HTML-element is defined as “Title”. The content section uses the following code:

<b><span style="font-size:25px;color:#b6dd18;margin-right:50px"> Application {{  application.title }} </span></b>

To add a bit of spicyness, our application title also has the additional text “Application”. This additive is independent from the actual application title and is therefore set before the variable (i.e.: Application + application.title). The style block (style=) modifies the font size (font-size:25px), the font color (color:#b6dd18) and the title positioning (margin-right:50vw). Moreover, the letters are styled bold (<b></b>). As you might have guessed, the variable is mentioned in the following code: {{ application.title }} .

The outcome looks like this:

../../../_images/html_example_application.title1.png

Variable app.user.username

Gives back the username:

<p>Username: {{ app.user.username }}</p>

Variable group.title

The group of a user can not be issued with a single expression, because twig 1.40 does not support map. Instead, a loop is needed:

{% for index, group in app.user.groups %}
    <p>Group #{{ index }}: {{ group.title }}</p>
{% endfor %}

Variable “entity”

The variable “entity” includes parameters into the HTML-elements. For instance, if the variable {{ entity }} is integrated, the ID of the HTML-element is shown. If the variable {{ entity.title }} is integrated, the (HTML-)element title is shown in the application.

The configuration for the HTML-element “Title” and the variable {{ entity.title }} with the additional text “HTML-element” looks like this:

../../../_images/html_example_entity.title_dialog1.png

The styling is transferred from the first example (application.title). Only the additional text, variable and position (margin-right) were changed for entity.title.

Finally, the element looks like this:

../../../_images/html_example_entity.title1.png

YAML-Definition:

title: 'HTML-Element'
class: Mapbender\CoreBundle\Element\HTMLElement
content: <p>Hello, World!</p><p>Application: {{ application.title |trans }}</p> # the variables: "application", "entity" und "configuration" are available in the content.
classes: my-special-css-class

Class, Widget & Style

  • Class: Mapbender\CoreBundle\Element\HTMLElement

  • Widget: mapbender.mbHTMLElement

Examples

Add an image

<img src='https://mapbender.org/fileadmin/mapbender/resources/images/logos/Mapbender-Logo.svg'>

Add an Link

<a href='https://mapbender.org' target='_blank'>Go to the Mapbender Website</a>