Skip to content

Forms Create another form of the same Sergen generated table

Victor Tomaili edited this page May 3, 2021 · 1 revision

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:

     [FormScript("xxxDB.xxxSecond")]
     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();
    
    		columns.unshift({
    			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())
    			return;
    		// get reference to current item
    		var item = this.itemAt(row);
    		// get reference to clicked element
    		var target = $(e.target);
    
    		// if user clicks "i" element, e.g. icon
    		if (target.parent().hasClass('inline-action'))
    			target = target.parent();
    
    		if (target.hasClass('inline-action')) {
    			e.preventDefault();
    			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.

Clone this wiki locally