Skip Navigation LinksspformlyBuilder

​​sp-formly Builder

Demo of the App  can be accessed by click here.  To test the App fully including integration with SharePoint, please download the App by click here.

[update] New version released on 22/07/2015 with multiple forms support and no need to manually modify pages

[update] New version released on 01/07/2015 with taxonomy field, people picker and attachment upload

sp-formly Builder is an InfoPath alternative to build form in an WYSIWYG drag&drop environment. It is built with angular-formly framework and other JavaScript open source frameworks. No host server required.

Current features are:

1. drag & drop form builder

2. support nested repeat section and layout

3. support business rule expression with angular-formly

4. support publish the custom form to a SharePoint list and replace its default new/edit/display form with your own custom form

5. support push form values into list fields.

This product is in BETA stage. There a few SharePoint components noticeably missing. I am collecting feedback and public interest before I devote more time to develop this free App.

 

Once you install the App. You will see the following screen.

ScreenShoot1.png
 The red area is the form components box, you can drag the form components from there to the blue area which is the form stage. There is an sample form on the form stage to show you what the App can do. You can drop more components on the form stage and drag them to rearrange them. And you can edit the component by click on it as following

ScreenShoot2.png
 

If you scroll down the page, you will see the form's live preview as following. Any change you made in the form stage  will reflected here in real time. 

 

ScreenShoot3.png 

 Click the "Preview Form" will bring you to the preview page before publish as following.

 ScreenShoot4.png

The "Publish target list name" specifies the SharePoint list name which the App will create and publish your form to replace its default list forms in the host web site.

For testing purpose, it may be a good idea to keep the default design, options to do the first publish. So you can see an working form first. Then you can modify the design and republish to see you changes.

After the form is published, you will see an new button appears to  taken you to the new list form as following.

ScreenShoot5.png 

 

Fill the form and click save. You will see you list item is saved like the following

ScreenShoot6.png 

The three field columns are shown because I set to push these form fields by setting the "SharePoint List Field Name" as following.

ScreenShoot7.png 

You can also open the newly create item in edit and display view.

If you haven't made change the default design, you should be able to see the repeat section will show/hidden base your answer in Queston1. This is done via the "expression Properties" property as an example to show how you can implement business rule on the form as following.

 ScreenShoot8.png

For more info on how to construct an expression for your business rules, please check angular-formly (the framework this App is using) documentation such as http://docs.angular-formly.com/v6.12.0-beta.0/docs/formly-expressions.

The product is in beta stage, please let me know your feedback so I can continue improve it. You can do that by click the "Contact us" link on top of the page. Your interests in this product will motivate me to further develop this free App. I am also available for hire if you want to bring this product into your origanization and/or willing to sponsor the development of it!   

This product was developed for SharePoint 2007 originally to replace InfoPath. What you see here is the enhanced old code ported to a SharePoint 2013/Online App.The framework works in SharePoint 2007 and 2010 as well. The future development plan is to be able to import an existing InfoPath form into a sp-formly form and be able to generate a form design from an existing list.