User Tools

Site Tools


doc:devel:luci

Adding new elements to LuCI

This is a sample to show how to add a new element to the LuCI interface

NOTE: Some of the information provided in this Wiki might be redundant from http://luci.subsignal.org/trac/wiki/Documentation/ModulesHowTo

As the examples show in the LuCI wiki, here are 2 ways to do this:

  1. CBI
  2. View (Template)

Adding a new top level tab

First we are going to add a new tab to the top navigation. Normally one can see: Freifunk | Status | System | Services | Network, etc

One can do this by adding a file to the controller directory in your <luci-path>/applications/luci-myapplication/luasrc/controller/myapp

<luci-path> is the path of your LuCI source files

luci-myapplication is a new directory created for these examples. The name of the directory has to start with luci- so that it is recognized by make menuconfig and show up as a module to be compiled.

controller is the default directory for any UI control (i.e. new tab)

myapp is also a custom directory for this particular application

We will call this file new_tab.lua

The content is as follows:

module("luci.controller.myapp.new_tab", package.seeall)  --notice that new_tab is the name of the file new_tab.lua
 function index()
     entry({"admin", "new_tab"}, firstchild(), "New tab", 30).dependent=false  --this adds the top level tab and defaults to the first sub-tab (tab_from_cbi), also it is set to position 30
     entry({"admin", "new_tab", "tab_from_cbi"}, cbi("myapp-mymodule/cbi_tab"), "CBI Tab", 1)  --this adds the first sub-tab that is located in <luci-path>/luci-myapplication/model/cbi/myapp-mymodule and the file is called cbi_tab.lua, also set to first position
     entry({"admin", "new_tab", "tab_from_view"}, template("myapp-mymodule/view_tab"), "View Tab", 2)  --this adds the second sub-tab that is located in <luci-path>/luci-myapplication/view/myapp-mymodule and the file is called view_tab.lua, also set to the second position


Adding the cbi_tab code

As specified above, we need to create a file called cbi_tab.lua in <luci-path>/luci-myapplication/model/cbi/myapp-mymodule

We will include the following code:

m = Map("cbi_file", translate("First Tab Form"), translate("Please fill out the form below")) -- cbi_file is the config file in /etc/config
d = m:section(TypedSection, "info", "Part A of the form")  -- info is the section called info in cbi_file
a = d:option(Value, "name", "Name"); a.optional=false; a.rmempty = false;  -- name is the option in the cbi_file
return m


Adding the cbi_file

From the code above, we know we need a config file that has the appropriate sections and options. In our case, we will create the file cbi_file in /etc/config which looks like this:

config 'info' 'A'
	option 'name' 'OpenWRT'


Adding the view_tab code

The view_tab.lua file needs to go in <luci-path>/applications/luci-myapplication/luasrc/model/cbi/myapp-mymodule/

Here are the contents of the file:

<%+header%>  -- default header

<% local ice_cream = luci.model.uci.cursor():get("ice_cream", "tub", "flavor") %>  -- store the ice cream flavors in the ice_cream variable from the config file ice_cream with type tub and list flavor
<% local eating = luci.model.uci.cursor():get("current", "ice", "flavor") %>  -- store the current flavor you are eating in the eating variable from the config file current with type ice and option flavor
<div class="cbi-map" id="cbi-ice_cream">  -- formatting to look like the other pages
<h2><a id="content" name="content">Ice Cream Information</a></h2>
<div class="cbi-map-descr">This is the selected ice cream flavor</div>
<fieldset class="cbi-section" id="cbi-ice_cream-flavor">
        <legend>Ice Cream Flavor</legend>
        <div class="cbi-section-descr"></div>
<ul><li>&nbsp;Flavor <%=eating%></li></ul>  -- use the eating variable to display the current flavor being eaten
</fieldset>
<br></br>
<div class="cbi-map-descr">These are the available flavors at your location</div>
<fieldset class="cbi-section" id="cbi-ice_cream-flavor>
        <legend>Available Ice Cream Flavor</legend>
        <div class="cbi-section-descr"></div>
<ul><li>&nbsp;<%= table.concat(ice_cream, "</li><br /><li>&nbsp;") %></li></ul></fieldset>  -- use the ice_cream available flavors to display them
</div>
<%+footer%>  -- default footer

doc/devel/luci.txt · Last modified: 2013/08/18 00:40 by insanid