Adding table row with text input to the site Overview table

Local Add-ons
1

I’m trying to build a custom add-on and I need to add a new row to the site Overview table (left column the option label, right clolumn an input field and/or a switch), however the docs are very scarce in general.

I tried looking at the github repos, the boilerplate, everything and nothing works. What would make the most sense to me would be something like this in renderer.jsx:

hooks.addContent("SiteInfoOverview_TableList", (site) => {
		return (
			<TableListRow key="wp-subfolder" label="WP in Subfolder">
				<BasicInput key={`wp-subfolder-field-${site.id}`} site={site} />

				<TextButton onClick={(event) => {electron.ipcRenderer.send("add-wp-subfolder-config",site.id)}}>
					Save
				</TextButton>
			</TableListRow>
		);
	});

…but id does not work either. Could someone help me please?

2

Hey @miart – Welcome to the Local Community Forums!

It’s hard to say what exactly is going on. I was able to add your code to the renderer.jsx and get it built in Local:

Image 2024-01-09 at 8.17.21 AM
Image 2024-01-09 at 8.17.21 AM1912×1058 216 KB

A couple of points:

  • Make sure you’re re-compiling after every change
  • Be sure to include it within the “context” function of the renderer.jsx file
  • This should only add the elements to the DOM, you’ll need to add something in the main.ts file to handle the event you’re wanting to do.
1 Like
3

Hi, @ben.turner, thanks, your code works!

This is my entire original code, that did not worl, so I assume the problem was with the context constant (electron instead of react).

import { TextButton, TableListRow, BasicInput } from "@getflywheel/local-components";
import { AddonRendererContext } from "@getflywheel/local/renderer";
import Boilerplate from "./Boilerplate";
import fs from "fs-extra";
import path from "path";

const packageJSON = fs.readJsonSync(path.join(__dirname, "../package.json"));
const addonID = packageJSON.slug;

export default function (context: AddonRendererContext) {
	const { hooks, electron } = context;

	/*
	 * The `path` is relative to the context of this hook, which is the currently viewed site
	 *
	 * The full path would look something like `/main/site-info/:siteID/<below-path-var>`
	 */
	hooks.addFilter("siteInfoToolsItem", (menu) => [
		...menu,
		{
			menuItem: "Counter",
			path: `/${addonID}`,
			render: (props) => <Boilerplate {...props} />,
		},
	]);


	hooks.addContent("SiteInfoOverview_TableList", (site) => {
		return (
			<TableListRow key="wp-subfolder" label="WP in Subfolder">
				<BasicInput key={`wp-subfolder-field-${site.id}`} site={site} />

				<TextButton onClick={(event) => {electron.ipcRenderer.send("add-wp-subfolder-config",site.id)}}>
					Save
				</TextButton>
			</TableListRow>
		);
	});
}
1 Like