The WebFrame's HTML

The webframe is the only page component that actually presents content so it is quite important to understand its HTML generation rules. WebFrames can be placed in page regions as defined by the layout used to render the page. The webframe's HTML code is generated by following some rules.

With title

From the webframe's "General settings", you can specify the title, with what tag it should be rendered (h1,h2,span,stron, no tag, etc.). In the example bellow the title is set to "WebFrame title" with html tag "h6"

<div class="wf">
    <div class="wf-title">
        <h6>WebFrame title</h6>
    </div>
    <div>WebFrame content</div>
    <!-- The above "div" in the code is just an example -->
</div>

Without a title

From the webframe's "General settings", you can also define whether the title should be presented at all. If you decide to hide it, the webframe will generate the following code:

<div class="wf">
    <div>WebFrame content</div>
</div>

Remove the div.wf wrapper surrounding the webframe

In the "General settings", you can define many attributes that will influence the generated HTML. To remove the outside wrapper of the webframe you need to set the "wrapper:visibility" attribute to "false" (without the quotes). This will generate the following code:

    <div class="wf-title">
        <h6>WebFrame title</h6>
    </div>
    <div>WebFrame content</div>

Add custom class to the div.wf wrapper

Again with the "General settings" attributes we can additional classes to this wrapper. To achieve this you need to set the "class" attribute to a space separated list of the CSS classes you need to add: "class1 class2 class3" (without the quotes). This will result the following HTML:

<div class="wf class1 class2 class3">
    <div class="wf-title">
        <h6>WebFrame title</h6>
    </div>
    <div>WebFrame content</div>
</div>

Add custom style to the div.wf wrapper

The same as with the CSS classes. To achieve this you need to set the "style" attribute's value to correspond the styles you need to be applied: "background:none; color:white;" (without the quotes). This will result the following HTML:

<div class="wf" style="background:none; color:white;">
    <div class="wf-title">
        <h6>WebFrame title</h6>
    </div>
    <div>WebFrame content</div>
</div>

Add common HTML attributes to the div.wf wrapper

The process of adding some of the generic attributes is the same as with the styles and classes. The attribute name that you need to add in the "General settings" is the same as the HTML attribute. The same applies to its value. As an example, if you need to add an "id" attribute to the wrapper with value "frame1", in the "general settings", you need to add the attribute "id" with value "frame1". This will result the following HTML:

<div class="wf" id="frame1">
    <div class="wf-title">
        <h6>WebFrame title</h6>
    </div>
    <div>WebFrame content</div>
</div>

Manage whether the webframe's visability

By default, if the webframe has contents, it will presented to all users. If the webframe's content is empty it will not be rendered at all. But what, if you need to show or hide the webframe based on some conditions. In Integra you could do that by applying two sets of attributes: "force-visible:???" and "force-invisible:???". With there help you can manage the webframe's visibility based on "role", "username", data-variable "key" and data-variable "value" (more about the attributes here). As an example, if you need to show a webframe only to guests you can do that by adding the "force-visible:role" attribute with value "Guest".