十月CMS-范围字段类型或“创建/更新"表单中的自定义 [英] October CMS - Range field type or custom in Create / Update form

问题描述

我需要在表单上设置输入范围以创建和更新.在十月份的CMS文档中，我找到了一个列表解决方案，但是在寄存器中没有范围"字段.

I need to set an input range on a form to create and update. In the October CMS documentation, I found a list solution, but in the register there is no "range" field.

<input type="range" min="0" max="100" step="1">

我正在使用"Builder插件".最接近解决方案的是宏"功能，但是有关该功能的文档并没有太大帮助.有没有人找到创建自己的输入类型或范围的解决方案?

I'm using the "Builder Plugin".The closest thing to the solution was the "macros" feature, but the documentation about the feature didn't help much. Has anyone found a solution for creating their own input types or range?

推荐答案

10月CMS是非常可扩展的平台.您可以扩展它的每个方面.

October CMS is very extendable platform. You can extend each and every aspect of it.

构建器插件也是如此，您可以根据需要对其进行扩展.

Same goes for builder plugin you can extend it as per your needs.

请稍候片刻，但是您会发现它很有用.

Please hold on this answer will be long but You will find it lot of useful.

1. 它将在控件列表中添加控件，因此您可以轻松地添加它，并将其重用于其他字段.

1. 可配置-您无需编辑任何文件/部分即可更改其值.其所有内置的构建器插件.您的值[最小，最大，步长]字段名称等.您可以通过构建器插件进行编辑/更新.

1. 它是自动的.意味着标签和字段名都将像其他控件一样工作，而您无需指定其他任何内容.一切都是动态的.

1. 将此代码添加到您的插件启动方法 plugin.php 中，它基本上会将控件添加到构建器插件控件列表中.[第一张图片]

1. add this code to your plugin boot method plugin.php, it will basically add the control to builder plugin control list. [1st image]

public function boot() {

  \Backend\Widgets\Form::extend(function($widget) {
    $widget->addViewPath(\File::symbolizePath('~/plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/field_partials'));
  });

  \Event::listen('pages.builder.registerControls', function($controlLibrary) {
    $properties = [
      'min' => [
        'title' => 'Min',
        'type' => 'string',
        'default' => '0',
        'ignoreIfEmpty' => false,
        'sortOrder' => 81
      ],
      'max' => [
        'title' => 'Max',
        'type' => 'string',
        'default' => '100',
        'ignoreIfEmpty' => false,
        'sortOrder' => 82
      ],
      'step' => [
        'title' => 'Step',
        'type' => 'string',
        'default' => '10',
        'ignoreIfEmpty' => false,
        'sortOrder' => 83,
      ]
    ];

    $controlLibrary->registerControl(
      'my_range',
      'Range Field',
      'Custom Range Field',
      \RainLab\Builder\Classes\ControlLibrary::GROUP_STANDARD,
      'icon-arrows-h',
      $controlLibrary->getStandardProperties(['stretch'], $properties),
      \HardikSatasiya\SoTest\Classes\CustomDesignTimeProvider::class
    );
  });

.... your extra code ...

1. 现在您需要创建/添加所需的从属文件 plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider.php ， plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/partials/_control-my_range.htm 和 plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/field_partials/_field_my_range.htm'

plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider.php

<?php namespace HardikSatasiya\SoTest\Classes;

use File;
use RainLab\Builder\Classes\ControlDesignTimeProviderBase;

class CustomDesignTimeProvider extends ControlDesignTimeProviderBase {

    public function renderControlBody($type, $properties, $formBuilder)
    {
        return $this->makePartial('control-'.$type, [
            'properties'=>$properties,
            'formBuilder' => $formBuilder
        ]);
    }

    public function renderControlStaticBody($type, $properties, $controlConfiguration, $formBuilder)
    {
        $partialName = 'control-static-'.$type;
        $partialPath = $this->getViewPath('_'.$partialName.'.htm');
        if (!File::exists($partialPath)) {
            return null;
        }
        return $this->makePartial($partialName, [
            'properties'=>$properties,
            'controlConfiguration' => $controlConfiguration,
            'formBuilder' => $formBuilder
        ]);
    }
   
    public function controlHasLabels($type)
    {
        return true;
    }

}

plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/partials/_control-my_range.htm

<div class="builder-blueprint-control-text">
    <i class="icon-arrows-h"></i> Range Field
</div>

1. 虽然上述步骤会将我们的自定义控件添加到插件构建器列表中，但下一步将添加表单字段的部分.[第三张图片]

plugins/hardiksatasiya/sotest/classes/CustomDesignTimeProvider/field_partials/_field_my_range.htm

<!-- Range -->
<?php if ($this->previewMode): ?>
    <span class="form-control"><?= $field->value ? e($field->value) : '&nbsp;' ?></span>
<?php else: ?>
    <div  style="display: flex;">
        <span style="width: 30px; margin-right: 20px;" id="<?= $field->getId() ?>_val">
            <?= $field->value ?>
        </span>
        <span>
           [<?= $field->getConfig('min') ?>]
        </span>
        <input
            type="range"
            name="<?= $field->getName() ?>"
            id="<?= $field->getId() ?>"
            value="<?= e($field->value) ?>"
            min="<?= $field->getConfig('min') ?>"
            max="<?= $field->getConfig('max') ?>"
            step="<?= $field->getConfig('step') ?>"
            oninput="(function(input) { document.getElementById('<?= $field->getId() ?>_val').innerText = input.value;  })(this)"
            <?= $field->getAttributes() ?>
        />
        <span>
            [<?= $field->getConfig('max') ?>]
        </span>
    </div>
<?php endif ?>

此html文件只是html标记，因此可以根据需要编辑它们并添加CSS/样式.

This html files are just html markup so can edit them and add css/style according to your need.

完成以下步骤后，您将可以在表单构建器的控件列表中看到您的自定义范围控件.现在，您可以像添加其他任何默认控件一样对其进行更新.

Once you did following steps you will able to see your custom range control in form builder's control list. now you can add it update it just like any other default control.

它是完全动态的，您可以选择 field-name，min，max，step ，它将被应用.

Its fully dynamic you can choose field-name, min, max, step and it will be applied.

注意:只需确保根据提供的代码中的设置替换 author-name 和 plugin-name .

Note: Just make sure you replace author-name and plugin-name according to your setup in provided code.

如有任何疑问，请发表评论.

if you have any doubts please comment.

这篇关于十月CMS-范围字段类型或“创建/更新"表单中的自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！