---
date: 2026-07-29 01:27:04
title: "Wusemans Modal & Card Integration"
description: "This page documents how to create a custom modal, card snippet, and UCI rule inside Technicolor’s WebUI framework"
hide: toc
#level: classified
---

# Wuseman Modal & Card Integration

## 1. Create the modal file

Place the modal file in `/www/docroot/modals/wuseman-modal.lp`:

```bash
cat << 'EOF' > /www/docroot/modals/wuseman-modal.lp
--pretranslated: do not change this file

gettext.textdomain('webui-core')

local ui_helper = require("web.ui_helper")
local message_helper = require("web.uimessage_helper")

ngx.print('\
\
');  ngx.print(ui_helper.createHeader(T"Wuseman", nil, true))   ngx.print('\
\
<div class="modal-body update">\
    <form class="form-horizontal" method="post" action="modals/wuseman-modal.lp">\
        ');  ngx.print(ui_helper.createMessages(message_helper.popMessages()))   ngx.print('\
        <fieldset>\
            <legend>');  ngx.print( T"Welcome" ); ngx.print('</legend>\
            <div class="control-group">\
                <label class="control-label">Message</label>\
                <div class="controls">\
                    <span class="simple-desc">Hello wuseman</span>\
                </div>\
            </div>\
        </fieldset>\
    </form>\
</div>\
');  ngx.print( ui_helper.createFooter() ); ngx.print('\
');
EOF

## 2. Create the card snippet

Place the card file in `/www/cards/099_wuseman.lp`:

    ```bash
    cat << 'EOF' > /www/cards/099_wuseman.lp
    --pretranslated: do not change this file

    local ui_helper = require("web.ui_helper")

    ngx.print('\
    <div class="span3">\
        <div class="smallcard modal-link" data-toggle="modal" data-remote="modals/wuseman-modal.lp" data-id="wuseman-modal">\
            '); ngx.print(ui_helper.createCardHeader(T"Wuseman Card", "icon-user")) ngx.print('\
            <div class="content">\
                <ul class="unstyled">\
                    <li><span class="status green"></span> Hello wuseman</li>\
                </ul>\
            </div>\
        </div>\
    </div>\
    ');
    EOF
    ```

## 3. Register the UCI rule & Apply

Tell Technicolor’s WebUI framework that the modal exists, assign access roles, and reload the web server.

    ```bash
    # Register rule
    uci set web.wusemanmodal=rule
    uci set web.wusemanmodal.target='/modals/wuseman-modal.lp'

    # Set allowed roles (use add_list for multiple roles)
    uci add_list web.wusemanmodal.roles='admin'
    uci add_list web.wusemanmodal.roles='superuser'

    # Append to main ruleset and commit
    uci add_list web.ruleset_main.rules='wusemanmodal'
    uci commit web

    # Restart web server to reload sessioncontrol
    /etc/init.d/nginx restart
    ```