Add custom component

[hamidsharifi]

Hi How can I add custom component. thanks

[prashant93]

I have added custom component have a look.

https://github.com/formio/examples.form.io/tree/master/custom-component

(function () { 'use strict'; angular.module('formApp', ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder"]) .run(run) .config(config);

run.$inject = ['formioComponents', '$templateCache', 'FormioUtils'];
config.$inject = ['formioComponentsProvider'];

function config(formioComponentsProvider) {

    //form RENDER
    formioComponentsProvider.register('fivestar', {
        title: 'Tool',
        template: 'formio/components/fivestar.html',
        group: 'layout',
        settings: {
            input: false,
            key: 'columns',
            columns: [{ components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }, { components: [] }]
        },
        viewTemplate: 'formio/componentsView/fivestar.html'
        //controller: ['$scope', function ($scope) {
        //    // Implement logic here...
        //}]
    });

    //form BUILDER
    formioComponentsProvider.register('fivestar', {
        fbtemplate: 'formio/formbuilder/fivestar.html',
        icon: 'fa fa-gavel',
        noDndOverlay: true,
        confirmRemove: true,
        views: [
          {
              name: 'Display',
              template: 'formio/components/fivestar/display.html'
          },
          {
              name: 'API',
              template: 'formio/components/common/api.html'
          },
          {
              name: 'Conditional',
              template: 'formio/components/common/conditional.html'
          }
        ]
    });
}

function run(formioComponents, $templateCache, FormioUtils) {
    formioComponents.components.content.disabled = true;
    formioComponents.components.fieldset.disabled = true;
    formioComponents.components.panel.disabled = true;
    formioComponents.components.table.disabled = true;
    formioComponents.components.well.disabled = true;
    formioComponents.components.resource.disabled = true;
    formioComponents.components.container.disabled = true;
    formioComponents.components.custom.disabled = true;
    //formioComponents.groups.layout.disabled = true;

    //form RENDER
    $templateCache.put('formio/components/fivestar.html',
                           FormioUtils.fieldWrap("<div class=\"row\">\n  <div class=\"col-sm-1\" style=\"width:9.333333%\" ng-repeat=\"column in component.columns track by $index\">\n    <formio-component\n      ng-repeat=\"_component in column.components track by $index\"\n      component=\"_component\"\n      data=\"data\"\n      formio=\"formio\"\n      submission=\"submission\"\n      hide-components=\"hideComponents\"\n      ng-if=\"builder ? '::true' : isVisible(_component, data)\"\n      formio-form=\"formioForm\"\n      read-only=\"isDisabled(_component, data)\"\n      grid-row=\"gridRow\"\n      grid-col=\"gridCol\"\n      builder=\"builder\"\n    ></formio-component>\n  </div>\n</div>\n"
                         ));

    $templateCache.put('formio/componentsView/fivestar.html',
      FormioUtils.fieldWrap("<div class=\"row\">\n  <div class=\"col-sm-1\" style=\"width:9.333333%\" ng-repeat=\"column in component.columns track by $index\">\n    <formio-component-view\n      ng-repeat=\"_component in column.components track by $index\"\n      component=\"_component\"\n      data=\"data\"\n      form=\"form\"\n      submission=\"submission\"\n      ignore=\"ignore\"\n      ng-if=\"builder ? '::true' : isVisible(_component, data)\"\n      builder=\"builder\"\n    ></formio-component-view>\n  </div>\n</div>\n"
    ));

    //form Builder
    $templateCache.put('formio/formbuilder/fivestar.html', FormioUtils.fieldWrap(
        '<div class="row">' +
            '<div class="col-xs-2 component-form-group" ng-repeat="component in component.columns">' +
                '<form-builder-list class="formio-column" component="component" form="form" formio="::formio"></form-builder-list>' +
            '</div>' +
        '</div>'
     ));
    // Create the settings markup.
    $templateCache.put('formio/components/fivestar/display.html',
     '<ng-form>' +
      '<form-builder-option property="customClass"></form-builder-option>' +
    '</ng-form>'
    );
}})();

[prashant93]

please close this above is code how to add custom component. Try and let me know if any issue's.