Custom input options for the custom TV

maciej_ww · April 7, 2024, 3:58pm

Hello everyone!

I’m developing my custom plugin (not extra that you need to install) to add some custom template variables into each modx site that I’m working with. I have followed this tutorial Custom Template Variables - Extending MODX | MODX Documentation - and so far everything is working fine, i have my first custom template called “customselect”, however, I’m wondering how could i add some extra “Input Options” in template variable settings (like Default Value):

I have seen that other default template variables have some different input options. Could somebody point to me to an example how to do it or give a bit more information about it?

Thanks guys!

halftrainedharry · April 7, 2024, 4:27pm

Usually it’s best to look at other MODX extras, to see how to implement something:
For additional “Input Options” use the event OnTVInputPropertiesList.

For example the extra “Fred” adds a Yes/No combobox to the input options:

The event in the plugin:

github.com

modxcms/fred/blob/3a2c7937967d8d4502a761af798d43e4f6a637b0/core/components/fred/elements/plugins/Fred.php#L392-L395


      
          case 'OnTVInputPropertiesList':
              $corePath = $modx->getOption('fred.core_path', null, $modx->getOption('core_path', null, MODX_CORE_PATH) . 'components/fred/');
              $modx->event->output($corePath . 'elements/tvs/input/options/');
              break;

github.com

modxcms/fred/blob/3a2c7937967d8d4502a761af798d43e4f6a637b0/core/components/fred/elements/tvs/input/options/freddropzone.php#L1-L6


      
          <?php
          $corePath = $modx->getOption('fred.core_path', null, $modx->getOption('core_path', null, MODX_CORE_PATH) . 'components/fred/');
          
          $modx->smarty->assign('hide_input', 1);
          
          return $modx->smarty->fetch($corePath . 'elements/tvs/input/tpl/freddropzone.options.tpl');

Smarty template for the combobox:

github.com

modxcms/fred/blob/3a2c7937967d8d4502a761af798d43e4f6a637b0/core/components/fred/elements/tvs/input/tpl/freddropzone.options.tpl#L1-L33


      
          <div id="tv-input-properties-form{$tv|default}"></div>
          {literal}
          
          <script type="text/javascript">
              // <![CDATA[
              var params = {
                  {/literal}{foreach from=$params key=k item=v name='p'}
                  '{$k}': '{$v|escape:"javascript"}'{if NOT $smarty.foreach.p.last},{/if}
                  {/foreach}{literal}
              };
              var oc = {'change':{fn:function(){Ext.getCmp('modx-panel-tv').markDirty();},scope:this}};
              MODx.load({
                  xtype: 'panel'
                  ,layout: 'form'
                  ,autoHeight: true
                  ,cls: 'form-with-labels'
                  ,labelAlign: 'top'
                  ,border: false
                  ,items: [{
                      xtype: 'combo-boolean'

This file has been truncated. show original

maciej_ww · April 7, 2024, 5:32pm

@halftrainedharry Thank you so much that works like a charm, by the way… how this value is stored in database?

halftrainedharry · April 7, 2024, 5:37pm

The database table for the TVs (modx_site_tmplvars) has a column “input_properties”.

maciej_ww · April 7, 2024, 6:02pm

Thanks for your response! That clarify a lot!
One more question what is responsible for saving this to this column? ext.js, modx object?

halftrainedharry · April 7, 2024, 8:15pm

When you click the “Save” button in the manager to save the TV, the code makes an AJAX-request to the processor Element/Tv/Update (or Element/Tv/Create). The parameter “action” of the request defines the processor.

In the processor, the function “setInputProperties()” saves the values to the “input_properties” field:

github.com

modxcms/revolution/blob/49659246226986a9b117f30de90820dc0f566467/core/src/Revolution/Processors/Element/TemplateVar/Update.php#L77-L94


      
          public function setInputProperties()
          {
              $fields = $this->getProperties();
              $inputProperties = [];
              $inputPropertyFound = false;
              foreach ($fields as $key => $value) {
                  $res = strstr($key, 'inopt_');
                  if ($res !== false) {
                      $inputProperties[str_replace('inopt_', '', $key)] = $value;
                      $inputPropertyFound = true;
                  }
              }
              if ($inputPropertyFound) {
                  $this->object->set('input_properties', $inputProperties);
              }
          
              return $inputProperties;
          }

system · April 9, 2024, 8:15pm

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.