In the previous posts I demonstrated howto easily generate forms for the Bootstrap & Material design framework. But maybe if you’re more into apps, then you want to use the Ionic framework. So in this post I will show how you can generate exact the same form for Ionic:
We start by creating a new Ionic project. So we type at the command prompt:
ionic start ionic-demo tabs
- the last parameter of the “ionic start …” command above (=”tabs”) will create a new project with already 3 tabs pre-configured (Home, About & Contact). We will (ab)use the Home tab to show our form.
- You can answer no (=n) to the question: “Link this app to your Ionic Dashboard to use tools like Ionic View? (Y/n)”
Again we go into the newly created directory:
Just like in the previous post, we copy over the “src\model” directory from one of the previous projects.
Then we open the project in the Angular workbench. We will use the home tab of this small app to show the form. So we open the “home.html” file and we remove all code between the “ion-content” start and end tag:
Next we drag & drop the customer entity onto the home.html canvas, but now do the drop between the “ion-content” start and end tag:
When you drop the entity the form builder will appear. Now make sure that you select the “Ionic 2+” UI library (see arrow 1):
Next press insert.
Now go back to the command prompt and type:
This command will automatically startup a browser for you. (if not: just look for the url, probably it will be http://localhost:8100/).
Normally you will see your app now in a browser with in the home tab our form.