Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Isaac Byrne
    @ipbyrne
    If anyone knows the answer to Mohana, that would be great as being able to modify JSON object values would also solve my issue.
    Paul Bors
    @paulbors

    Hey @rahul106-cpu,

    If you use angular's lib, then you can register the component inside Form Builder as you normally would and add something similar to this to it which would allow you to add a collection (add a new row, remove a row) to the component's configuration screen:

    const MY_CUST_COMP_OPTIONS: FromioCustomComponentInfo = {
    type: ...
    selector: ...
    title: ...
    group: ....
    icon: ....
    template: ....
    chagneEvent: ...
    editForm() {
    const myCustomCompTextFieldForFormBuild: ExtendedComponentSchema<NestedComponent> = {
    weight: 101, type: 'textfield', .....
    }
    const myCustomCompMapThatHasATableInFormBuilder: ExtendedComponentSchema<NestedComponent> = {
    weight: 102,
    type: 'datamap',
    input: true,
    key: 'customOptions.myCustomCompMapKey',
    label: 'Label of the map collection you want to show inside Form Builder',
    tooltip: 'The tooltip you want to show as help to the user configuring your custom component',
    validate: { requried: true // and all other validator rules you might want},
    valueComponent: {
    type: 'textfield',
    column: 'value',
    key: 'value',
    label: 'Whatever label you want to show for this column',
    placeholder: 'Some placeholder string that makes sense',
    input: true,
    validate: { requried: true // and all other validator rules you might want},
    }
    }
    };

    // Steal a reference to the default Form Builder registered components
    const addedFields: ExtendedComponentSchema<any>[] JSON.parse(
         JSON.stringify(Components.components.textfield.editForm().components)
    );
    
    // Register our own form builder custom component's settings
    for(const fieldSchema of addedFields) {
        if(fieldSchema.key === 'tabs') {
            const tabs = fieldSchema.components;
            for(const tab of tabs) {
                if(tab.key === 'display') { // I'm assuming you want your component added to Display tab
                    const displays = tab.components;
                    // Let's add those extra form field that configure our custom components to Form Builder
                    displays.push(myCustomCompTextFieldForFormBuild); // register custom text field
                    displays.push(myCustomCompMapThatHasATableInFormBuilder); // register custom map
                }
            }
        }
    }

    };

    Now use the new MY_CUST_COMP_OPTIONS to register your custom component with the FormIO library as you normally do.

    For extra help, check FormIO's git repos for the given class types in above code. See how they use it as there are plently of examples in their repos :)

    (and if I knew the highlight codeing syntax for Gitter, I would have done that to become with, meanwhile sorry for the mess above :)
    another way of doing this, is to define the full FromioCustomComponentInfo JSON and not using the for loops as above, that's a bit of a hack of using the default fields from FormIO and adding to the bottom Display tab our own extra settings. You might not like that...
    Paul Bors
    @paulbors
    Hey @NatSulivan_twitter, I mean the preview panel has its own "preview-panel" CSS class. It shouldn't be that hard to write a CSS snippet to hide it...
    Phil
    @tgrrr
    I’m struggling with the PDF output. I can control the css that generates the form through having my own template setup and hosted. However, I need access to render completed individual fields in order to fully customise the output.
    Alfredo Irarrazaval
    @airarrazaval
    @travist as semantic and bootstrap3 will be deprecated in formiojs v5, are there any plans on adopting bootstrap5 as default template or are you going to stick with bootstrap4?
    Yichun Zhao
    @yichun-aot
    Hello! I would like to ask something about boolean values (eg checkboxes in a form). I noticed that they are defaulted to be false - is there a way to set it to null as the default? Thanks... appreciate it!
    abhilash-aot
    @abhilash-aot
    image.png
    @yichun-aot I think we can use data tab with setting custom Default value in js as value=null ?
    Yichun Zhao
    @yichun-aot
    @abhilash-aot hehe tried that.. didnt work unfortunately.
    Alfredo Irarrazaval
    @airarrazaval

    Hello! I would like to ask something about boolean values (eg checkboxes in a form). I noticed that they are defaulted to be false - is there a way to set it to null as the default? Thanks... appreciate it!

    You won't be able to set it as null all checkboxes values are cast to either true or false. Any falsey value (i.e. undefined, 0, null) are treated as false. The only way to remove a checkbox value is to hide it using the conditional configuration. Components have an option that allows its value to be deleted from the submission when the component is hidden (it's called clearOnHide). You can check the behavior of the checkbox component here: https://jsfiddle.net/airarrazaval/2prtve4h

    @yichun-aot
    Jason Cohen
    @jdcohen220
    Getting a modal when trying to make any changes that says "Server is in restricted mode" can't seem to find anything about this in the docs. Has anyone experienced this before?
    1 reply
    Yichun Zhao
    @yichun-aot
    @airarrazaval Thank you for your reply! What if i dont want to clear the value on submission? What if i want a behaviour that if the checkbox is not touched, then it has a null value; if it is checked and then unchecked, a false value is saved? Is this possible?
    Cameron Contour
    @ccontour
    Checkboxes aren't a good input for dealing with tristate values. A pair of radio buttons, or a select would work better, where you can explicitly have yes / no / nothing selected
    Ana
    @anaegm
    hello everyone
    i'm trying to make use of the "Conditional Add Button" field on the Data Grid, so I can hide my button basically at all times but still be able to have the remove row button
    and i can't find any documentation on it? the field box has a "show = ..." as the placeholder but writing "show = false" does absolutely nothing
    StefanRupertsberger
    @StefanRupertsberger
    Hello Everyone!
    I'm implementing a custom component for the angular version. It is working fine, but when I initially open the form the component does not load. I have to reload the page for it to appear. I don't get any error messages or something like that.
    Yichun Zhao
    @yichun-aot
    @ccontour thanks.. yeah that makes sense, its just that if I have an API call submitting a form not involving that checkbox field, then I want it to be null.. if anyone has an idea, that would be great!
    Paul Bors
    @paulbors

    Hey @StefanRupertsberger, the observed behavior you have doesn't make sense especially since you claim there are no JavaScript errors.

    Can you reproduce that in a smaller project with the bear minimum code required and post it online for us to take a look?

    Ayub Ahmed
    @AAyub_z_twitter
    Hi everyone, New to form.io. Here you will find the Json for my form.io components. I am particularly interested how i can populate fields based on events such as focus or click. If you do a quick find for "dental" you will find a text field component wherein the value should be placed depending on the selection made by the user on two other components. I have used calculateValue as well as a hint where an event (click) is used . If someone could point me in the right direction. Thank you.
    No errors on the form but nothing is happening when the user selects the values.
    Mohan
    @mohanacchu
    Hi. I'm new to form.io.. i installed it and try to run in stackblitz but I'm getting
    formio' is not a known element:
    1. If 'formio' is an Angular component, then verify that it is part of this module.
    2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
    pls let me know where i'm going wrong..it would be very helpful
    zhiwentanmct
    @zhiwentanmct
    Hi, we use form.io's PDF server. Did anyone notice any change to the recent PDF server update? Most of our forms' radio buttons are not working
    Will Gay
    @wag110894
    @zhiwentanmct, can you provide a video of the issue taking place?
    @wag110894
    StefanRupertsberger
    @StefanRupertsberger
    Hey @paulbors, we use Angular v7.2.4 and Angular Elements v10.0.3. Could that version mismatch cause this problem?
    rahul106-cpu
    @rahul106-cpu
    @paulbors Hi paul thanks for your responds,
    we reported an issue in date / time component. at the time of form submission, I am getting blank value for DateTimeComponent. please have a look on screenshot for the issue
    https://prnt.sc/14nkx9o
    ilhamakbar12
    @ilhamakbar12
    Hi, im currently trying using file component and succesfully download and delete file with url storage. but when i try to click the url in the list of files and using private download checklisted my server has returned file but i cant view or automatically download my uploaded file. is there is a schema or any flow using this private download checklisted?
    note : im try this on https://formio.github.io/formio.js/app/builder .
    drosophila-melanogaster
    @drosophila-melanogaster

    Hello. I'm using Formio Angular and I'm trying to customize the options available for the "Action" dropdown on the "Form Builder > Button Edit Form", for example. After doing this:

    import { FormioUtils, Components } from '@formio/angular';
    
    const buttonEditForm = Components.components.button.editForm;
    Components.components.button.editForm = () => {
        let editForm = buttonEditForm();
        let action = FormioUtils.getComponent(editForm.components, 'action', false);
        action.data.values = [
            { label: 'Submit', value: 'submit' },
            { label: 'Reset', value: 'reset' }
        ];
        return editForm;
    };

    ... the dropdown gets properly updated, but I then lose all previous configuration regarding the Button Edit Form done via [options] on the <form-builder> Angular component (e.g. all inner tabs and fields/components I've set to be ignored). Has anyone ever faced anything similar before? Thanks in advance.

    Foxtrek_64
    @foxtrek_64:matrix.org
    [m]

    Hi all. I installed form.io on CapRover. I'm attempting to set up an integration with hCaptcha, but I'm finding it hard to follow any of the API docs. According to the calipseo/formio docker page, the latest version is 1.90.7, which is the one I am running. However, I seem to be missing a vast majority of UI components. I'm logged in as the admin account, but the only page that's available is "Home." There is no sidebar on the left, so I can't access settings (or anything else for that matter). About the only thing I can do is build forms using built-in components and embed them.

    Do I need to do anything special to get the settings pages available?

    Here's my view, if it helps. Left and right of this is just whitespace.
    Or am I simply using the wrong container image?
    abhilash-aot
    @abhilash-aot

    Here's my view, if it helps. Left and right of this is just whitespace.

    @foxtrek_64:matrix.org This is an expected UI of a formio client app . This isnt a server of formio as such. Its a sample app using the formio apis

    foxtrek_64
    @foxtrek_64:matrix.org
    [m]
    Ah, I see.
    Well, my solution was to stop self-hosting and just use a free account on the form.io website. That at least let me properly configure email and such.
    I have my hCaptcha variables plugged into the reCaptcha configuration options, so it should be pretty easy to just wire that up by pulling from that config I hope.
    abhilash-aot
    @abhilash-aot
    :)
    Foxtrek_64
    @foxtrek_64:matrix.org
    [m]
    Thanks for your help
    Yichun Zhao
    @yichun-aot
    Hello! I wanna ask how can I dynamically change a button's label? Currently I am doing something like this... but it does not work for some reasons :/ the same issue applies to a component title... thanks!
    image.png
    Przzz
    @Przzz6_twitter
    Howdy everyone, hope y'all having a nice week
    One question, does anyone now if the token expiration date for a password reset is configurable? I've noticed that it only lasts about 2 hours
    1 reply
    e-gauthier
    @e-gauthier

    Hello all, I have a question about a specifc comit (c2ab81839e3b74b4dccd00df75b73e83d5dd3398) where keepAsReference is hardcoded at true in WebFormBuilder.setForm.

    This cause a pretty side effect for us where our source property that we use to create the form, in React, is updated with all properties of each component instead of just the necessary properties.

    Is it an expected behavior?

    Thx

    2 replies