#1

I’m just starting to make a plugin - I’d like an action that pops up a dialog box with a few fields to fill in. From going through the API, it feels like there are some of the components to do this (e.g. Modal), but I can’t figure out if there’s a UI toolkit that I should use, if I have to manage all the state myself, if I can use the Settings components in a useful way etc.

Is there any API support for creating a small form and then processing it in response to an Action?

#2

For anyone else working through this, I’ve adapted the Modal dialog in the example plugin, and made use of the createEl methods on the box. I’m still not sure where they come from, but I can make a form and get the results. Here’s my fairly hacky method at the moment:

	async onOpen() {
		let {contentEl} = this;
		let template = await this.plugin.loadTemplate(this.templateName)
		console.log("Modal Got template ",template)
		const result: Array<Array<any>> = Mustache.parse(template);
		console.log(result)
		contentEl.createEl('h2', { text: "Create from Template: " + this.templateName });
		const titleEl = contentEl.createEl('div');
		titleEl.createEl('span',{text:"Title: "});
		const titleInput = titleEl.createEl('input');
		titleInput.value = "Testing Person"
		titleInput.style.cssText = 'float: right;';
		const controls:Record<string,HTMLInputElement> = {"title":titleInput}
		// Input El

		result.forEach( r => {
			if( r[0] === "name" && r[1] != "title") {
				const id:string = r[1]
				const controlEl = contentEl.createEl('div');
				controlEl.createEl("span", {text: id})
				const input = controlEl.createEl('input');
				input.style.cssText = 'float: right;';
				controls[id] = input
			}
		})
		const submitButton = contentEl.createEl('button', { text: "Add" });

		submitButton.style.cssText = 'float: right;';
		submitButton.addEventListener('click', () => {
			console.log("Submitted!")
			console.log("Calling create")
			const data:Record<string,string> = {}
			for( const k in controls ) {
				data[k] = controls[k].value
			}
			console.log("Got data! ",data)
			this.plugin.createNote(this.templateName,this.targetDir,data['title'],data);
			this.close()
		});