Embedded Source Editor

Use Symphony to embed a source editor for your users, enabling them to view, edit, or configure data sources directly in your application. Define the editor for users as needed for your custom solution.

You can embed the complete source editor, or limit what your users can access and use.

• Step 1. Define a Connection to Create a Source
• Step 2. Create a Component for the Source Editor
• Step 3. Define Interactivity Settings
• Step 4. Define Breadcrumbs Configuration

Step 1. Define a Connection to Create a Source

Define a connection users can access to create a source. See Embed Source Editor Properties for more information on the properties for creating a source.

            {
	create: {
		visible: true,
		connections: {
			ids: ["6347eca23d231b5c3c2a2f79", "633d6ef33d27115c3c2a2e45"],
			defaultId: "6347eca22d271b5c3c2a2f79"
		}
	},
	fields: {
		visible: true
	},
	caching: {
		visible: true
	},
	settings: {
		visible: true
	}
}
        

Step 2. Create a Component for the Source Editor

            // First initialize embed manager
const sourceEditor = await embedManager.createComponent('source-editor', {
	sourceId: "633167d188f857721d2f70dd", // existing Source ID
	activeTab: "fields",
	theme: "composer",
	tabs: { ... },
	breadcrumbs: { ... },
	interactivityOverrides: { ... },
	notificationSettings: { ... },
});
        

Step 3. Define Interactivity Settings

            interactivityOverrides: {
	create: {
		ADD_FROM_CONNECTION: false,
		UPLOAD_NEW_FILE: 'false' // value can be string as well
	},
	fields: {
		ADD_DERIVED_FIELD: false,
		ADD_HIERARCHY_FIELD: 'false' // value can be string as well
	},
	caching: {
		STATISTICS_CACHE: false,
		SCHEDULE_REFRESH: 'false' // value can be string as well
	}
}
        

Step 4. Define Breadcrumbs Configuration

            {
	title: "Back to Sources",
	href: "https://company.com/sources",
	target: "_blank",
	onClick: () => {
		console.log("do action");
	}
}