00003 Integrating an ID column in a HumHub Module's Admin area

A rock-solid recipe—100% aligned to the existing folder structure and build flow—for tacking on our ID column styling via LESS (so it survives every build.sh), fixing your build.sh permissions, and running everything from the HumHub root.

A Inject the ID column in Unclassified Area on the bottom

1) Inject the ID column

File

protected/modules/abcdirectory/views/admin/index.php

In the SpaceGridView::widget([ … 'columns' => [ … ] ]) array, prepend:

[
    'attribute'      => 'id',
    'label'          => Yii::t('AbcdirectoryModule.base', 'ID'),
    'contentOptions' => ['class' => 'abcdirectory-space-id-column'],
],

so it becomes:

'columns' => [
    [
        'attribute'      => 'id',
        'label'          => Yii::t('AbcdirectoryModule.base', 'ID'),
        'contentOptions' => ['class' => 'abcdirectory-space-id-column'],
    ],
    ['class' => SpaceImageColumn::class],
    ['class' => SpaceTitleColumn::class],
    // … the rest unchanged …
],

2) Style it in your LESS entry (not CSS)

File

protected/modules/abcdirectory/resources/less/humhub.abcdirectory.admin.less

Append at the very bottom:

// ─── ID column styling ─────────────────────────────────────────
.abcdirectory-space-id-column {
  width: 50px;        // narrow fixed width
  text-align: center;
  font-weight: bold;
  padding-right: 8px;
}

Why LESS? Every time you run build.sh you regenerate ../css/humhub.abcdirectory.admin.css, so injecting into the generated CSS will be overwritten. By putting it in the LESS source, it will persist.

3) Fix build.sh permissions & rebuild

From your HumHub root:

# 1) Make sure build.sh is executable
chmod +x protected/modules/abcdirectory/resources/less/build.sh

# 2) Run the LESS build
cd protected/modules/abcdirectory/resources/less
./build.sh

That will update:

protected/modules/abcdirectory/resources/css/humhub.abcdirectory.admin.css

with your new ID-column rule.

4) Clear caches & assets

Still from your HumHub root:

rm -rf protected/runtime/cache/* protected/runtime/assets/*

5) Verify in your browser

Reload Admin → Spaces. You should now see a slim “ID” column at the left of every row.

ID Image Name Members Visibility …

—where ID is the original space.id.

Here’s exactly what you need—using only the files you already have—so that an “Show Space ID column” checkbox appears in your module settings and actually shows/hides that narrow ID-column in your admin grid.

B Switch on/off Toggle for the ID Column

1) Extend your Configuration model

File: protected/modules/abcdirectory/models/Configuration.php

What to do:

  1. Add a new public property
  2. Include it in your boolean rules()
  3. Load it from settings
  4. Save it back to settings
--- a/models/Configuration.php
+++ b/models/Configuration.php
@@ class Configuration extends Model
     public $spaceBreadcrumb = true;
     public $getSpaceImageFromCategory = false;
+
+    /**
+     * Show the original space ID in the admin list
+     * @var bool
+     */
+    public $showSpaceIdColumn = false;
@@ public function rules(): array
-        [['removeDefaultSpaceBrowser', 'removeDefaultSpaceDirectory', 'spaceBreadcrumb', 'getSpaceImageFromCategory'], 'boolean'],
+        [['removeDefaultSpaceBrowser', 'removeDefaultSpaceDirectory', 'spaceBreadcrumb', 'getSpaceImageFromCategory', 'showSpaceIdColumn'], 'boolean'],
@@ public function loadBySettings(): void
         $this->spaceBreadcrumb = (bool)$this->settingsManager->get('spaceBreadcrumb', $this->spaceBreadcrumb);
         $this->getSpaceImageFromCategory = (bool)$this->settingsManager->get('getSpaceImageFromCategory', $this->getSpaceImageFromCategory);
+        $this->showSpaceIdColumn  = (bool)$this->settingsManager->get('showSpaceIdColumn',  $this->showSpaceIdColumn);
@@ public function save(): bool
         $this->settingsManager->set('spaceBreadcrumb', $this->spaceBreadcrumb);
         $this->settingsManager->set('getSpaceImageFromCategory', $this->getSpaceImageFromCategory);
+        $this->settingsManager->set('showSpaceIdColumn',  $this->showSpaceIdColumn);

2) Add the checkbox to your Settings UI

File: protected/modules/abcdirectory/views/config/index.php

What to do: Inside your form (for example, right after the “Space headers” section), add a new collapsible block:

<?= $form->beginCollapsibleFields(Yii::t('AbcdirectoryModule.config', 'Administration')) ?>
    <?= $form->field($model, 'showSpaceIdColumn')
             ->checkbox()
             ->hint(Yii::t('AbcdirectoryModule.config', 'Toggle the ID column in the admin Spaces list')) ?>
<?= $form->endCollapsibleFields() ?>

Feel free to tweak the section title / hint to your taste.

3) Wire it up in the Admin grid

File: protected/modules/abcdirectory/views/admin/index.php

What to do: Locate the GridView’s column array (around line 203). Above the first SpaceImageColumn, insert:

[
    'attribute'      => 'id',
    'label'          => Yii::t('AbcdirectoryModule.base', 'ID'),
    'contentOptions' => ['class' => 'abcdirectory-space-id-column'],
    'visible'        => Yii::$app->getModule('abcdirectory')
                            ->getConfiguration()
                            ->showSpaceIdColumn,
],

Your final columns block will start like:

'columns' => [
    [
        'attribute'      => 'id',
        'label'          => Yii::t('AbcdirectoryModule.base', 'ID'),
        'contentOptions' => ['class' => 'abcdirectory-space-id-column'],
        'visible'        => Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn,
    ],
    ['class' => SpaceImageColumn::class],
    ['class' => SpaceTitleColumn::class],
    // … the rest stays exactly as before …
],

4) Style it in LESS so it survives build.sh

File: protected/modules/abcdirectory/resources/less/humhub.abcdirectory.admin.less

What to do: Append at the bottom:

// ─── ID column styling ─────────────────────────────────────────
.abcdirectory-space-id-column {
  width: 50px;        // narrow
  text-align: center;
  font-weight: bold;
  padding-right: 8px;
}

5) Rebuild your assets and clear caches

Run everything from your HumHub root (never from /path/to/...)

# 1) Make sure the LESS build script is executable
chmod +x protected/modules/abcdirectory/resources/less/build.sh

# 2) Recompile the CSS
cd protected/modules/abcdirectory/resources/less
./build.sh

# 3) Clear Yii’s runtime & assets caches
cd "$(dirname "$PWD")"/../../..   # back to your HumHub root
rm -rf protected/runtime/cache/* protected/runtime/assets/*

Result

  • In Settings → Abcdirectory, you now have an “Show Space ID column” checkbox under Administration.
  • Toggling it on/off will instantly show or hide a slim ID column at the left of your Admin → Spaces grid, so you always know the original space.id.

To get the ID column to show in the top “classified” table (the one rendered via _tableHead.php / _tableSpaceRow.php), you need to add it in two places—your header partial and your row partial—guarded by the same showSpaceIdColumn config flag.

B Inject the ID column in Classified Area

1) Header: insert an “ID” <th>

File

protected/modules/abcdirectory/views/admin/_tableHead.php

Find the <tr> where your other <th>s live (around line 5). At the very start, prepend:

<?php if (Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn): ?>
    <th class="abcdirectory-space-id-column">
        <?= Yii::t('AbcdirectoryModule.base', 'ID') ?>
    </th>
<?php endif; ?>

So it might look like:

<tr>
    <?php if (Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn): ?>
        <th class="abcdirectory-space-id-column">
            <?= Yii::t('AbcdirectoryModule.base', 'ID') ?>
        </th>
    <?php endif; ?>

    <th><?= Yii::t('AbcdirectoryModule.admin', 'Name / Sort order') ?></th>
    <th><?= Yii::t('SpaceModule.base', 'Members') ?></th>
    <th><?= Yii::t('SpaceModule.base', 'Visibility') ?></th>
    <th></th>
</tr>

2) Rows: insert an <td> with $space->id

File

protected/modules/abcdirectory/views/admin/_tableSpaceRow.php

At the top of the <tr> definition, after the opening <tr> tag but before you render the first cell, insert:

<?php if (Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn): ?>
    <td class="abcdirectory-space-id-column">
        <?= Html::encode($space->id) ?>
    </td>
<?php endif; ?>

So your row partial will start roughly like:

<tr data-key="<?= $space->id ?>">
    <?php if (Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn): ?>
        <td class="abcdirectory-space-id-column">
            <?= Html::encode($space->id) ?>
        </td>
    <?php endif; ?>

    <td>
        <!-- existing code for title/sort-order… -->
    </td>
    <td><?= $memberCount ?></td>
    <td><?= /* visibility label… */ ?></td>
    <td><?= SpaceAdminMenu::widget([...]) ?></td>
</tr>

That ensures your “ID” both has a header and actual cells in the top table.

3) Make sure your LESS rule covers it

You already added in

protected/modules/abcdirectory/resources/less/humhub.abcdirectory.admin.less
.abcdirectory-space-id-column {
  width: 50px;
  text-align: center;
  font-weight: bold;
  padding-right: 8px;
}

So after you rebuilt (and cleared caches), that style will apply to both the top table and the unclassified grid.

4) Rebuild CSS & clear cache

(from your HumHub root)

chmod +x protected/modules/abcdirectory/resources/less/build.sh
cd protected/modules/abcdirectory/resources/less
./build.sh
cd ../../../..    # back to HumHub root
rm -rf protected/runtime/cache/* protected/runtime/assets/*

Now when you check the “Show Space ID column” box and reload Admin → Spaces, you should see a narrow “ID” column in both the top (classified) and bottom (unclassified) tables.

C Show Category ID

For a better look and feel and for practical usability reasons we like to integrate the Category ID's too

To show an ID cell for your categories as well, you need to add the same conditional <td> you did for spaces into your category-row partial. Here’s exactly what to do:

1) Header already in place

You’ve already got the <th> in _tableHead.php wrapped in the showSpaceIdColumn check, so both category and space tables share that “ID” column header.

2) Patch the Category-Row Partial

File:

protected/modules/abcdirectory/views/admin/_tableCategoryRow.php

  1. Import Html at the top (if not already):

    <?php use yii\helpers\Html; ?>

  2. Find the opening of your <tr> block—somewhere like:

    <tr data-key="<?= $category->id ?>">

  3. Immediately after that <tr> line, insert:

    <?php if (Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn): ?>
   <td class="abcdirectory-space-id-column">
       <?= Html::encode($category->id) ?>
   </td>
<?php endif; ?>

So your _tableCategoryRow.php will start like:

<?php use yii\helpers\Html; ?>

<tr data-key="<?= $category->id ?>">
    <?php if (Yii::$app->getModule('abcdirectory')->getConfiguration()->showSpaceIdColumn): ?>
        <td class="abcdirectory-space-id-column">
            <?= Html::encode($category->id) ?>
        </td>
    <?php endif; ?>

    <td>
        <!-- existing category title / sort‐order markup -->
    </td>
    <!-- … other columns (e.g. member counts, visibility icons) … -->
</tr>

3) Rebuild & Clear Cache

From your HumHub root:

chmod +x protected/modules/abcdirectory/resources/less/build.sh
cd protected/modules/abcdirectory/resources/less
./build.sh
cd ../../../..   # back to HumHub root
rm -rf protected/runtime/cache/* protected/runtime/assets/*

Now, when “Show Space ID column” is checked, you’ll get that narrow ID cell for both categories and spaces in the top table—keeping your columns aligned and your look consistent.