How can we add Page Break as a SAIL component?

It doesn't make sense to duplicate the entire UI design in a custom HTML template, which has to be developed and maintained, and runs risk of becoming out of sync with the SAIL form. What you can do is write a generic utility that receive a SAIL interface as an input, parses the structure and converts it to HTML. We did this for one use case. However be warned that when we upgraded from 16.3 to 17.1 (I think) Appian changed the SAIL structure and our rules broke backwards compatibility with our parsing logic. We solved backwards compatibility by creating an intermediate custom Dictionary structure that can then be mapped either into a SAIL form or an HTML form. The Dictionary structure was something like:

{{label: "Section 1 Header", list: {"Section 1 Item 1", "Section 1 Item 2"}}, {label: "Section 2 Header", list: ...}}

We were fortunate our use case required a very simple structure that was nothing but sections with bullet lists under each section header. For more complex forms you would have a more complex structure and more complex parsing rules. But once established you would then be able to inject line breaks and print any arbitrary SAIL form the way you want. Whether this effort is justified depends on how important the line breaks are to the client.

It doesn't make sense to duplicate the entire UI design in a custom HTML template, which has to be developed and maintained, and runs risk of becoming out of sync with the SAIL form. What you can do is write a generic utility that receive a SAIL interface as an input, parses the structure and converts it to HTML. We did this for one use case. However be warned that when we upgraded from 16.3 to 17.1 (I think) Appian changed the SAIL structure and our rules broke backwards compatibility with our parsing logic. We solved backwards compatibility by creating an intermediate custom Dictionary structure that can then be mapped either into a SAIL form or an HTML form. The Dictionary structure was something like:

{{label: "Section 1 Header", list: {"Section 1 Item 1", "Section 1 Item 2"}}, {label: "Section 2 Header", list: ...}}

We were fortunate our use case required a very simple structure that was nothing but sections with bullet lists under each section header. For more complex forms you would have a more complex structure and more complex parsing rules. But once established you would then be able to inject line breaks and print any arbitrary SAIL form the way you want. Whether this effort is justified depends on how important the line breaks are to the client.