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

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

  1. CBI
  2. View (Template)

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", 60).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.htm, also set to the second position

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

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'

The view_tab.htm file needs to go in <luci-path>/applications/luci-myapplication/luasrc/view/myapp-mymodule/

Here are the contents of the file:

<h1><%:Hello World%></h1>                                                      
This website uses cookies. By using the website, you agree with storing cookies on your computer. Also you acknowledge that you have read and understand our Privacy Policy. If you do not agree leave the website.More information about cookies
  • Last modified: 2020/10/09 22:23
  • by wrtf740n