dzcpP35A

1Formio.builder(document.getElementById('builder'),
2            {
3                title: "My Wizard",
4                type: "form",
5                display: "wizard",
6                components: [
7                    {
8                        type: "panel",
9                        title: "Page 1",
10                        components: [
11                        ]
12                    },
13                    {
14                        type: "panel",
15                        title: "Page 2",
16                        components: [
17                        ]
18                    }
19                ]
20            },
21            {
22                display: 'wizard',
23                builder: {
24                    basic: false,
25                    advanced: false,
26                    data: false,
27                    layout: false,
28                    premium: false,
29                    custom: {
30                        title: 'User Fields',
31                        weight: 10,
32                        components: {
33                            firstName: {
34                                title: 'First Name',
35                                key: 'firstName',
36                                icon: 'terminal',
37                                schema: {
38                                    label: 'First Name',
39                                    type: 'textfield',
40                                    key: 'firstName',
41                                    input: true
42                                }
43                            },
44                            lastName: {
45                                title: 'Last Name',
46                                key: 'lastName',
47                                icon: 'terminal',
48                                schema: {
49                                    label: 'Last Name',
50                                    type: 'textfield',
51                                    key: 'lastName',
52                                    input: true
53                                }
54                            },
55                            email: {
56                                title: 'Email',
57                                key: 'email',
58                                icon: 'at',
59                                schema: {
60                                    label: 'Email',
61                                    type: 'email',
62                                    key: 'email',
63                                    input: true
64                                }
65                            },
66                            phoneNumber: {
67                                title: 'Mobile Phone',
68                                key: 'mobilePhone',
69                                icon: 'phone-square',
70                                schema: {
71                                    label: 'Mobile Phone',
72                                    type: 'phoneNumber',
73                                    key: 'mobilePhone',
74                                    input: true
75                                }
76                            }
77                        }
78                    }
79                },
80                editForm: {
81                    textfield: [
82                        {
83                            key: 'api',
84                            ignore: true
85                        }
86                    ]
87                }
88            }).then(function(builder) {
89            builder.on(
90                function() {
91                    console.log(builder.schema);
92                });
93        });