Implement the Add Block Template

Let’s make the add block template look the way we’d like it to. We’re going to do this by actually editing edit.php -- because remember, the add block template simply includes the edit block template. Here’s the markup we’re going to use:

<div class="form-group">
    <label class="control-label"><?=t('Background Picture')?></label>
    <?php
        $fileManager = Core::make('helper/concrete/file_manager');
        print $fileManager->image('fID', 'fID', t('Choose Image'));
    ?>
</div>
<div class="form-group">
    <label class="control-label"><?=t('Override Page Title')?></label>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="overridePageName" value="1">
            <?=t('Yes, override the page title with a custom title.')?>
        </label>
    </div>
</div>
<div class="form-group" data-group="custom-page-header-title">
    <label class="control-label" for="customPageHeaderTitle"><?=t('Custom Page Header Title')?></label>
    <input type="text" id="customPageHeaderTitle" name="customPageHeaderTitle" class="form-control">
</div>
<script type="text/javascript">
    $('input[name=overridePageName]').on('change', function() {
        if ($(this).is(':checked')) {
            $('div[data-group=custom-page-header-title]').show();
        } else {
            $('div[data-group=custom-page-header-title]').hide();
        }
    }).trigger('change');
</script>

The first thing you’ll want to notice is the markup: this is basic HTML and PHP code. Concrete CMS’s templates do not use a special templating language.

Next, check out the actual classes and tags used; this is Bootstrap 3, which Concrete uses for its internal editing views. If you’re building custom interfaces for block types or Dashboard pages -- anything wrapped inside the Concrete core editing user interface -- you’ll want to style your form elements using Bootstrap for maximum compatibility and attractiveness.

Next, make a note of the first control in our form. This isn’t a standard HTML element -- it’s the output of the Concrete\Core\Application\Service::image() call. This outputs custom JavaScript and HTML to provide a button that hooks directly into the the Concrete file manager. We’re passing it fID as the name of the input element, meaning that the ID of whatever file we’re picking will be contained within a POST request variable named fID.

Speaking of those request variables, look at the names for the rest of those variables in this form. We’re exactly matching the column names in our database table. This is important -- we’ll talk more about this when we implement saving in our controller.

Next, you’ll see we have some custom jQuery code. This code helps make it so that the custom page header title input element only shows up when we check the “Override Page Title” checkbox. This isn’t strictly required, but it’s a nice touch; it informs people that this setting is really only necessary when the checkbox is checked.

And finally, let’s look for the form and cancel/add buttons. They’re not there! That’s because the form submission is fully handled by Concrete. As a block developer all you need to do is add the fields to the template.

When we add the block, this is what it looks like:

And when the checkbox is checked:

Let’s walk through this.