Editing a Form in the Designer

Our sample projects and report templates can help you learn the basics of working with our products.
Products ✖PDF Forms ✖Quick Start ✖Designer ✖Events ✖
This example is outdated, you can check out the many other new examples in this category.This example shows how to load a form and edit it in the designer.

First, import scripts: 
import { Component, ElementRef, ViewChild } from '@angular/core';
import { StimulsoftFormsComponent, StimulsoftFormsService } from 'stimulsoft-forms';
import { StiForm } from 'stimulsoft-forms/lib/elements/StiForm';
import { StiInterfaceEvent } from 'stimulsoft-forms/lib/services/objects';

Next, define URL template, properties, form, interface event and id: 
<stimulsoft-forms
      #fromComponent
      [requestUrl]="'http://localhost:7536/Forms/Action'"
      [properties]="properties"
      [form]="form"
      (interfaceEvent)="interfaceEvent($event)"
      id="sti-form"
>
</stimulsoft-forms>

After that, create AppComponent class. Specify form name and create constructor with properties. 
export class AppComponent {

	public properties = {};
	public form!: any;

	private formName = "Order.mrt";

	constructor(public formService: StimulsoftFormsService) {
		this.properties = { formName: this.formName, localization: "en" };
	}
	
...

Now, create interface event. In this interface create FormNew, FormSave, FormSaveAs and Loaded events: 
...
	interfaceEvent(event: StiInterfaceEvent) {
		switch (event.name) {
			case "FormNew":
				this.form = this.formService.createElement("Form");
				break;

			case "FormSave":
			case "FormSaveAs":
				this.formService.postData({ action: "FormSave", formName: event.data.name ?? this.formName, form: this.form.saveToReportJsonObject().serialize() }, (data: any) => {
					console.log(data);
				});
				break;

			case "Loaded":
				let form: StiForm = this.formService.createElement("Form");
				if (event.data.form) {
					form.loadFormJsonString(atob(event.data.form));
				}
			this.form = form;
			break;
	}
}

Next, in the FormController create Action method with action cases: 
public IActionResult Action()
{
	try
	{
		var data = JObject.Parse(this.HttpContext.Request.Form["data"]);
		var action = data["action"].ToString();
		switch (action)
		{
			case "Initialize":
				var initData = StiWebForm.Initialize(data, Initialize(data));
				return Json(initData.Content);

			case "GetFonts":
				if (data["fonts"] != null &&  (data["fonts"] as JArray).Count> 0 && (data["fonts"] as JArray)[0]["fontFamily"].ToString() == "Mrs. Monster")
				{
					List<Hashtable> fontResources = new List<Hashtable>();
                            
					/*Hashtable fontResourceItem = new Hashtable();
					var content = System.IO.File.ReadAllBytes("Fonts/mrsmonster.ttf");
					fontResourceItem["contentForCss"] = String.Format("data:{0};base64,{1}", "application/x-font-ttf", Convert.ToBase64String(content));
					fontResourceItem["originalFontFamily"] = "Mrs. Monster";
					fontResources.Add(fontResourceItem);*/

					return Json(fontResources);
				}
				return Json("{}");

			case "FormSave":
				var formName = data["formName"].ToString();
				SaveFileString("Forms", formName, data["form"].ToString());
				return Json("{result: \"ok\"}");

			default:
				var result = StiWebForm.ProcessRequest(data);
				return result.ContentType switch
				{
					"application/pdf" => new FileContentResult(result.Content as byte[], result.ContentType),
					_ => Json(result.Content),
				};
		}
	}
	catch (Exception e)
	{
		return new ContentResult()
		{
			Content = e.Message,
			ContentType = "text/plain"
		};    
	}
}

After that, create Initialize method. In this method, specify options and properties. Next, load localization and form files, if needed. In the end, apply font families. 
private Hashtable Initialize(JObject data)
{
	var options = new Hashtable();
	var properties = data["properties"] as JObject;

	if (properties != null)
	{
		// Load localization file
		if (properties["localization"] != null)
		{
			var localizationName = properties["localization"];
			options["localization"] = GetFileString("Localization", $"{localizationName}.xml");
		}

		// Load form file
		if (properties["formName"] != null)
		{
			var formName = properties["formName"].ToString();
			var formContent = GetFileString("Forms", formName);
			options["form"] = Convert.ToBase64String(Encoding.UTF8.GetBytes(formContent));
		}
	}

	options["fontFamilies"] = StiWebFormHelper.GetSystemFontFamilies();

	return options;
}

Finally, create GetFilePath, GetFileString and SaveFileString methods: 
private string GetFilePath(string folder, string fileName)
{
	var assemblyDirectory = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
	return Path.Combine(assemblyDirectory, folder, fileName);
}

private string GetFileString(string folder, string fileName)
{
	var filePath = GetFilePath(folder, fileName);
	using (var reader = new StreamReader(filePath))
	{
		return reader.ReadToEnd();
	}
}

private void SaveFileString(string folder, string fileName, string content)
{
	var filePath = GetFilePath(folder, fileName);
	using (var writer = new StreamWriter(filePath))
	{
		writer.Write(content);
	}
}
View on GitHub Download
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.
I agree