This is my first attempt at a tutorial for extending the WebUI in FreeIPA.  I’m going to show how to build a new section of the WebUI.

The one entity that we didn’t manage to cover in the 2.0 time frame that was in the original spec was Automount.     There is a small amount of Automount code in the WebUI, and I’ll use that as the starting point.

All WebUI code resides in the subdirectory:  install/ui.

First we’ll add the minimal declaration for an entity in the file automount.js.  In this case, the entity is automount location.  It is declared like this:

IPA.entity_factories.automountlocation = function() {
    return IPA.entity_builder().
        entity('automountlocation').
        search_facet({
            columns:['cn'],
            add_fields:['cn']
        }).
        details_facet({sections:[{
            name:'identity',
            label: IPA.messages.details.identity,
            fields:['cn']
        }]}).
        standard_association_facets().
        build();
};

This gives us

• a search facet with a single field:  cn or common name.
• an adder dialog with a single field, cn
• A details facet with a single section and a single field: cn
• relationship facets for the other entites.

We’ll start by making that visible.

First, we have to let the web UI know about the file.  This is done by adding a line in index.html to include the file.

(As and aside, in the near future we are going to incorporate a module loading mechanism into FreeIPA WebUI, something along the line of stealjs or require.js.)

We also want to place it into the site map. In webui.js, add it into the policy tab. See Line 12. Note that the white icon visible on mouse over makes it much easier to read when the source code is this wide.

  {name:'policy', label: IPA.messages.tabs.policy, children:[
            {name:'hbacrule', label: IPA.messages.tabs.hbac ,
             entity:'hbacrule', children:[
                {name:'hbacsvc', entity:'hbacsvc'},
                {name:'hbacsvcgroup', entity:'hbacsvcgroup'}
            ]},
            {name:'sudorule', label: IPA.messages.tabs.sudo,
             entity:'sudorule',children:[
                {name:'sudocmd', entity:'sudocmd'},
                {name:'sudocmdgroup', entity:'sudocmdgroup'}
            ]},
            {name:'automountlocation', entity:'automountlocation'},
            {name:'pwpolicy', entity:'pwpolicy'},
            {name:'krbtpolicy', entity:'krbtpolicy'}

This should be enough to make it visible from the web browser in a static viewing

Automountlocation search page

In order to package up the file as part of the build, we need to make sure Makefile.am has an entry for the new file.

	associate.js			\
	automount.js			\
	caution.png			\
	centered-bg.png                 \

To be good developers we also want to make sure that Javascript lint checks it for correctness: Add this line to jsl.conf.

	associate.js			\
	automount.js			\
	caution.png			\

This is just the basics. In a future article, I’ll show how to extend this facet with some custom widgets, which provide much more interesting functionality. Thanks for reading.