Create another form of the same Sergen generated table

wirble edited this page Nov 9, 2016 · 5 revisions
Clone this wiki locally

This allows you to create a different form from the main form, allowing you to create a form with more or less fields from your main form. In cases where certain users may not need to see everything to do their daily work.

  1. Copy xxxForm.cs and paste, then rename to something appropriate, ie.. xxxSecondForm.cs

  2. In xxxSecondForm.cs, rename the class and the form script to the same:

    public class xxxSecondForm
    //You can delete fields or include other fields as necessary.
  3. Rebuild and Transform T4 Templates before the next step.

  4. Copy the xxxDialog.ts file and paste, then rename to xxxSecondDialog.ts

    //change the three lines to the new one as shown below
    export class xxxxDialog extends Serenity.EntityDialog<xxxRow, any> { //original
    export class xxxSecondDialog extends Serenity.EntityDialog<xxxRow, any> { //new
    protected getFormKey() { return xxxForm.formKey; }//original
    protected getFormKey() { return xxxSecondForm.formKey; }//new
    protected form = new xxxForm(this.idPrefix);//original
    protected form = new xxxSecondForm(this.idPrefix);//new
    //you may need to adjust or delete other existing customization that does not apply in the new form
  5. Add a button to the new form. As far as I can tell, you can't do a direct get to the form dialog with the id. If anyone knows, let me know. Either case, you need to create some sort of button where the user can click on for this new modified dialog.

    For me, I added it to the xxxGrid.ts file following the Inline Action Sample:

        protected getColumns() {
            var columns = super.getColumns();
                field: 'Approves',
                name: '',
                format: ctx => '<a class="inline-action approve-form" title="Approves">' +
                    '<i class="fa fa-hand-o-up text-red"></i></a>',
                width: 24,
                minWidth: 24,
                maxWidth: 24
            return columns;
        protected onClick(e: JQueryEventObject, row: number, cell: number) {
            super.onClick(e, row, cell);
            if (e.isDefaultPrevented())
            // get reference to current item
            var item = this.itemAt(row);
            // get reference to clicked element
            var target = $(;
            // if user clicks "i" element, e.g. icon
            if (target.parent().hasClass('inline-action'))
                target = target.parent();
            if (target.hasClass('inline-action')) {
                if (target.hasClass('approve-form')) {
                    var customer = Q.first(xxxDB.xxxRow.getLookup().items,
                        x => x.Id == item.Id);
                    new xxxDB.xxxSecondDialog().loadByIdAndOpenDialog(item.Id);
  6. Rebuild and Transform T4 Templates again for good measure.

Note: If you get a 500 internal server error when you try to update and it looks like it's not connecting to the service endpoint. Check the naming of your fields, make sure they are correct.