Voor de readme van het originele project zie https://github.com/formio/contrib.
Stappen om custom component toe te voegen+draaiend te krijgen:
BUILDER
-
Clone de formio.js SDK (https://github.com/formio/formio.js/) en zoek een component uit die zoveel mogelijk lijkt op dat wat je wilt gaan maken
-
Zet alles voor jouw component uit de SDK uit /components en /templates in src/components en src/templates. Lib hoef je niet aan te passen.
-
Doe aanpassingen
-
Als je je aanpassingen wilt testen, draai npm install
-
Pak de formio-contrib.use.min.js uit /dist, upload deze en neem de link naar de url. Ik heb dropbox gebruikt, dan krijg je dit soort linkjes https://dl.dropboxusercontent.com/s/f1zyeg266auul43/formio-contrib.use.min.js?dl=0. Je mag niet naar een download link verwijzen, de link moet direct naar de het javascript bestand verwijzen.
-
Open de form io management tool (https://portal.form.io/) en zet de link onder settings/Custom js and css, klik opslaan en herlaad de pagina, klik 'ok'
-
Doe hetzelfde voor de .css als je daar aanpassingen in gedaan hebt (src/sass/contrib.css, deze wordt gecompileerd naar dist/contrib.css). (Als je alleen Nijmegen componenten aan het nabouwen bent kun je hier ook de css van Nijmegen neerzetten: https://componenten.nijmegen.nl/v5.0.1/nijmegen.css)
-
Rinse and repeat tot het werkt
RENDERER
- De renderer https://bitbucket.org/yourrequest/form-renderer/src/master/ heeft een dependency op dit project. Als je je wijzigingen in de renderer wilt zien moet je deze pushen in dit project en npm install draaien op de renderer
- Als je een nieuwe custom component toegevoegd hebt: voeg deze toe in de renderer aan app.component.ts:initializeApp() zoals dat al gedaan wordt voor slider.
- Styling hoef je in principe niets voor te doen als je Nijmegen componenten aan het nabouwen bent, de Nijmegen css is al onderdeel van dit project.