How to add a new tab in formio Angular?

[ajaykumarsana]

Hi @travist ,
I been searching through the issues a lot for "Adding custom tab in form io",
Here i elaborate more what's query is ?

After drag any component this is how it appears, is it possible to add custom tab beside to any existing tab?

please help me. Thanks a lot

[travist]

You just need to modify the "editForm" of that component and add another tab to the JSON of the tabs component there. Something like this maybe?...

const editForm = Formio.Components.components.textarea.editForm;
Formio.Components.components.textarea.editForm = function() {
  const form = editForm();
  const tabs = Formio.Utils.getComponent(form.components, 'tabs');
  tabs.components.push({
    key: 'custom',
    label: 'Custom',
    components: [
      ...
    ]
  });
  return form;
};

[ajaykumarsana]

Hi @travist
Thank you for the response, I'm having one issue here.
I.e when i try to print tabs in console custom tab shows but in UI custom tab not shown.
PFA.

Please help!!

[travist]

My code above would have edited it for the Text Area component only. Here you are showing Text Field. Is that the issue?

[ajaykumarsana]

Hi @travist
No, In your code i've made changes to textfield and applied.
Can you please provide a solution?

[ajaykumarsana]

Hi @travist

I'll share my code snippet , please let me know where did i missed.
app.module.ts

import { AppConfig } from './formio-config';
import { FormioAppConfig} from 'angular-formio';
import { Components , Utils  } from 'formiojs';

const editForm = Components.components.textarea.editForm;
Components.components.textarea.editForm = function() {
  const form = editForm();
  const tabs = Utils.getComponent(form.components, 'tabs', true);
  tabs.components.push({
    key: 'custom',
    label: 'Custom',
    components: tabs.components[3].components
  });
  return form;
};

console.log(Components.components.textarea.editForm());

`

I've tried to print console.log(Components.components.textarea.editForm()); in the html where i use form-builder

both console.log statements showing custom tag which shown as below

But its not showing in UI :(

So, do we need to register or export editForm in above code to reflect in UI?
please help.
Thank you for your patience in reading my comments.

[travist]

We will need some time to work up the prototype for this and provide a more detailed example (as well as try out your example). We may not get to this until later this week, but maybe someone from the community has done this and can provide code snippet.

[vlont]

I am assuming that the logic of the formio works as if everything were Component. So I followed this concept and it worked here as follows:

 Formio.builder(document.getElementById('builder'), {},{
            //attachMode:'full',
            editForm: {
                textfield:[
                    { 
                       key: 'display', //Add in existing tab
                       components: [ 
                            { //Add custom field
                                title: 'Add field in existing Tab',
                                key: 'demo1',  
                                type: 'textfield', //field type, any existing and valid component
                                label: 'Add field in existing Tab Label',                            
                                input: true
                            },
                            { //Removing a existing field
                                key: 'description',
                                ignore: true
                            },
                        ]
                    },
                    { 
                        key: 'newTab', //ADD new custom TAB
                        label:"NEW Tab",
                        components: [  //ADD custom components in TAB
                            {
                                title: 'First Name',
                                key: 'firstname',  
                                type: 'textfield',
                                label: 'First Name',                            
                                input: true
                            },
                            {
                                title: 'List Names',
                                key: 'listnames',  
                                type: 'textarea',
                                label: 'List Names',                            
                                input: true
                            },
                        ]
                    },
                    {
                        key: 'api', //remove TAB
                        ignore: true
                    }      
                ]
            }

[vinayrdy966]

how to add click event here like in api tab, add another which add key and tab

[lane-formio]

I'd suggest opening a new issue and possibly give some more information on what you are trying to do now?

[vinayrdy966]

thanks for quick response.
submitted new issue - #1068

[vinayrdy966]

How to add button event in formio? I'm adding custom button in angular formio.