formio / contrib Goto Github PK
View Code? Open in Web Editor NEWContributed components for Form.io
Contributed components for Form.io
I have formio https://github.com/formio/formio.git running in my local system.
I want to show the custom contrib components in the edit form page along with the default component, so that I can use these as drag and drop similar to other components.
What are the steps required to add custom components in left navigation bar of edit form along with default component?
Ok, just tried to check this out and do npm install.
Doesn't compile:
$ npm install
npm WARN prepublish-on-install As of npm@5, prepublish
scripts are deprecated.
npm WARN prepublish-on-install Use prepare
for build steps and prepublishOnly
for upload-only.
npm WARN prepublish-on-install See the deprecation note in npm help scripts
for more information.
@formio/[email protected] prepublish /Users/tagg/sietch-formio-components
npm run build
@formio/[email protected] build /Users/tagg/sietch-formio-components
tsc && gulp templates && npm run webpack && node-sass ./src/sass/contrib.scss ./dist/formio-contrib.css
src/components/CheckMatrix/CheckMatrix.form.ts:1:33 - error TS2307: Cannot find module 'formiojs/components/_classes/nested/NestedComponent.form'.
1 import nestedComponentForm from 'formiojs/components/_classes/nested/NestedComponent.form';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/components/CheckMatrix/CheckMatrix.ts:6:28 - error TS2307: Cannot find module 'formiojs'.
6 import { Components } from 'formiojs';
~~~~~~~~~~
src/use.ts:1:24 - error TS2307: Cannot find module 'formiojs'.
1 import { Formio } from 'formiojs';
~~~~~~~~~~
Found 3 errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @formio/[email protected] build: tsc && gulp templates && npm run webpack && node-sass ./src/sass/contrib.scss ./dist/formio-contrib.css
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @formio/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tagg/.npm/_logs/2020-05-04T14_16_11_268Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @formio/[email protected] prepublish: npm run build
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @formio/[email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tagg/.npm/_logs/2020-05-04T14_16_11_294Z-debug.log
Line 14 in 8bf9c6e
Whats the point in running 3 different configs of webpack in sequence?
Especially since this command is used in the build command?
Windows
NodeJS 10.15.1
I have an issue building this template to support ie11.
When including the formio-contrib.use.min.js
file along with formiojs, I am seeing an error triggered on the formio.full.min.js
file in IE11:
e.fetch.polyfill=!0
Chrome and Edge work as expected.
The original bundled contrib/dist/formio-contrib.use.min.js
works fine , so it seems to be an issue with the build?
Typescript seems to be configured for IE11 support. I have tried different versions of Node and dependencies, but no luck so far.
Download the repo
run npm install
and use the newly built formio-contrib.use.min.js
file as described in the readme:
Or you can use the formio-contrib.use.min.js file which automatically adds the Formio.use method.
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<script src="https://unpkg.com/@formio/contrib@latest/dist/formio-contrib.use.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@formio/contrib@latest/dist/formio-contrib.css">
I have created a custom component in FormIO. I have followed the tutorial on the Check Matrix component and I am having issues trying to:
How can I get the component to render and add my events to this component? What i am doing wrong?
InputComponent.ts
Import { Components } from "formiojs";
const Field = Components.components.field;
export default class loqateAddressComponent extends (Field as any) {
constructor(component, options, data) {
super(component, options, data);
}
static schema(...extend:any[]) {
return Field.schema({
type: 'textfield', //want this to be customname but it wont render
label: 'Xrm Address',
key: 'loqateaddress',
...extend});
}
static get builderInfo() {
return {
title: 'Loqate Address',
group: 'basic',
icon: 'home',
documentation: '/userguide/#address',
weight: 35,
schema: loqateAddressComponent.schema(),
};
}
renderInput(){
return this.renderTemplate('input', {
input: {
type: 'input',
ref: `${this.component.key}`,
attr: {
id: `${this.component.key}`,
class: 'form-control',
type: 'search',
}
}
});
}
public render(children) {
return super.render(this.renderTemplate('loqateaddress',{
renderInputType: this.render.bind(this)
}));
}
public attach(element: any) {
const refs = {};
refs[`${this.component.key}`] = "input";
this.loadRefs(element, refs);
console.log("attach rendered");
this.addEventListener(element, 'change', ()=> {
console.log("address clicked");
});
return super.attach(element);
}
}
Form.ejs (For my template)
<div>
{% {{ctx.renderInputType}} %}
</div>
Hi all,
I'm willing to create a custom component that includes an entry field and drop-down list next to it, for example to choose the language or the unit of the entered text.
Could you please give me some hints how to tackle this task?
Concrete, I would like to know the following:
I'm struggling with it since days, and don't know how to move forward!
Thanks and regards
Please provide as many details as you can:
Add the following code when customizing the component
get className() {
let name = table-responsive ${super.className}
if (!this.component.bordered) {
name += ' no-top-border-table'
}
return name
}
report an error:
Cannot read properties of undefined (reading 'hasOwnProperty')
If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.
For code or form JSON, please enclose in a code block:
// your code here
/**
* This file shows how to create a custom component.
*
* c
*/
import { Components } from 'formiojs'
const FieldComponent = (Components as any).components.field
import editForm from './CheckMatrix.form'
/**
* Here we will derive from the base component which all Form.io form components derive from.
*
* @param component
* @param options
* @param data
* @constructor
*/
export default class CheckMatrix extends (FieldComponent as any) {
public checks: Array<Array<any>>
constructor(component, options, data) {
super(component, options, data)
this.checks = []
}
static schema() {
return FieldComponent.schema({
type: 'checkmatrix',
numRows: 3,
numCols: 3,
})
}
public static editForm = editForm
static builderInfo = {
title: 'Check Matrix',
group: 'basic',
icon: 'fa fa-table',
weight: 70,
documentation: 'http://help.form.io/userguide/#table',
schema: CheckMatrix.schema(),
}
// 添加这 会report error
get className() {
let name = `table-responsive ${super.className}`
if (!this.component.bordered) {
name += ' no-top-border-table'
}
return name
}
get tableClass() {
let tableClass = 'table '
;['striped', 'bordered', 'hover', 'condensed'].forEach((prop) => {
if (this.component[prop]) {
tableClass += `table-${prop} `
}
})
return tableClass
}
renderCell(row, col) {
return this.renderTemplate('input', {
input: {
type: 'input',
ref: `${this.component.key}-${row}`,
attr: {
id: `${this.component.key}-${row}-${col}`,
class: 'form-control',
type: 'checkbox',
},
},
})
}
public render(children) {
return super.render(
this.renderTemplate('checkmatrix', {
tableClass: this.tableClass,
renderCell: this.renderCell.bind(this),
})
)
}
/**
* After the html string has been mounted into the dom, the dom element is returned here. Use refs to find specific
* elements to attach functionality to.
*
* @param element
* @returns {Promise}
*/
attach(element) {
const refs = {}
for (let i = 0; i < this.component.numRows; i++) {
refs[`${this.component.key}-${i}`] = 'multiple'
}
this.loadRefs(element, refs)
this.checks = []
for (let i = 0; i < this.component.numRows; i++) {
this.checks[i] = Array.prototype.slice.call(this.refs[`${this.component.key}-${i}`], 0)
// Attach click events to each input in the row
this.checks[i].forEach((input) => {
this.addEventListener(input, 'click', () => this.updateValue())
})
}
// Allow basic component functionality to attach like field logic and tooltips.
return super.attach(element)
}
/**
* Get the value of the component from the dom elements.
*
* @returns {Array}
*/
getValue() {
var value = []
for (var rowIndex in this.checks) {
var row = this.checks[rowIndex]
value[rowIndex] = []
for (var colIndex in row) {
var col = row[colIndex]
value[rowIndex][colIndex] = !!col.checked
}
}
return value
}
/**
* Set the value of the component into the dom elements.
*
* @param value
* @returns {boolean}
*/
setValue(value) {
if (!value) {
return
}
for (var rowIndex in this.checks) {
var row = this.checks[rowIndex]
if (!value[rowIndex]) {
break
}
for (var colIndex in row) {
var col = row[colIndex]
if (!value[rowIndex][colIndex]) {
return false
}
let checked = value[rowIndex][colIndex] ? 1 : 0
col.value = checked
col.checked = checked
}
}
}
}
Would be nice if the other components are included.
Attempting to implement the sample CheckMatrix custom component as code in a project as a starting point to developing our own custom component. Importing as shown (sort of) in the documentation at https://formio.github.io/formio.js/app/examples/customcomponent.html
import { Formio } from "formiojs";
import checkmatrix from "./components";
(Formio as any).use(checkmatrix);
(which replaces importing from the npm package)
Component fails to render, in its place is "Unknown component: checkmatrix"
Added a console.log to show that the schema is being accessed, but the component constructor fails to execute.
What steps are missing?
Hello,
I'm trying to add drag and drop areas into a custom component.
To make it work, i tried to render a 'fieldset' component into my custom component but i cannot drop items into it.
Is there a way to make it work ?
Ideally i'd make a accordion with custom values. Eg. https://developer.mozilla.org/fr/docs/Web/HTML/Element/summary
The summary would be based on parameters (a datagrid i guess) and the values could be anything the user wants : a password field, a date field, a checkbox...
Thank you
Please provide as many details as you can:
Add the following code when customizing the component
get className() {
let name = table-responsive ${super.className}
if (!this.component.bordered) {
name += ' no-top-border-table'
}
return name
}
report an error:
Cannot read properties of undefined (reading 'hasOwnProperty')
If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.
For code or form JSON, please enclose in a code block:
// your code here
get className() {
let name = `table-responsive ${super.className}`
if (!this.component.bordered) {
name += ' no-top-border-table'
}
return name
}
I use contrib's test page quite a bit for custom component development, but I also heavily use the evalContext for my validators. Is there a good way to inject the evalContext into the form for doing this testing? My assumption would be in https://github.com/formio/contrib/blob/master/index.html. Thank You
Obviously I'm missing something… I've added custom Javascript to the Custom CSS and Javascript section of the Developer Portal (using next.form.io) but the custom component is not appearing anywhere.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.