Simple 'Note' feature request

4 posts by 4 authors in: Forums > CMS Builder
Last Post: December 18, 2023   (RSS)

By zaba - August 21, 2023

Hi, I often have the need to accompany the cmsb with notes to the input fields, so that when adding the content the website owner has a little bit more info.

I am currently doing this by creating the code in the html separator field, but it would be nice if this was a subset of the separator with a radio box for "Note" with all the styling in place and just a field for the note:.

It follows the style of the cms.

It's not a major pain but would save another step in what is already an awesome tool.

<div class='col-sm-12'>
  &nbsp;
</div>
<div class='col-sm-2 control-label'>
 Note
</div>
<div class='col-sm-10' style="border:1px solid #D5D5D5; background-color:#f9f9f9; padding:12px; padding-top:10px; padding-bottom:10px;">
This is where you would enter the note about a specific field or whatever you want.
</div>
<div class='col-sm-12'>
  &nbsp;
</div>

By Dave - August 21, 2023

Hi Zaba, 

Thanks for the suggestion! I can certainly see the merit in that idea.

For text fields, we already have several customization options in the field editor, such as field prefixes, descriptions, and addons for before and after the field.

The challenge here is balancing flexibility with complexity, so we can do what we want to do but don't end up with an interface that's overly complicated and slows us down.

I think our next revision with the field editors is to create a more visual tool. This would provide a preview of what the field will actually look like and allow you to click on parts to add text and see the result.

I'll make a note of your suggestion and give it some thought, thanks! Feel free to share if anything else comes to mind.

Dave Edis - Senior Developer
interactivetools.com

By kitsguru - December 15, 2023 - edited: December 18, 2023

I do this in the description at the top of the editor, this shows on the list and detail screens.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#notes" aria-expanded="false" aria-controls="notes">
  Notes
</button>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#changelog" aria-expanded="false" aria-controls="changelog">
  Changelog
</button>

<div class="collapse" id="changelog">
  <div class="well">
    <pre>
- enter changes here
    </pre>
  </div>
</div>


<div class="collapse" id="notes">
  <div class="well">
    <pre>
- enter any special instruction here
    </pre>
  </div>
</div>

The built-in bootstrap toggle takes care of showing and hiding the content.

Jeff Shields