Edit in GitHubLog an issue

Properties Rail

The properties rail is always present along the right side of CF Editor. The extensibility feature allows adding new panels to it, ensuring seamless integration.

side panel

Example of adding custom rail panels

This code snippets demonstrate how to create a custom panel using UIX SDK library and add it to the properties rail of the editor, enabling users to access and interact with the custom functionality seamlessly.

Copied to your clipboard
// App.js
import { HashRouter as Router, Routes, Route } from "react-router-dom"
import ExtensionRegistration from "./ExtensionRegistration"
import RailContent from "./RailContent";
// ...
function App() {
return (
<Router>
<ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
<Routes>
<Route index element={<ExtensionRegistration />} />
<Route
exact
path="index.html"
element={<ExtensionRegistration />}
/>
<Route
exact path="rail/:railId"
element={<RailContent />}
/>
</Routes>
</ErrorBoundary>
</Router>
)
// ...
}
Copied to your clipboard
// ExtensionRegistration.js
import { register } from "@adobe/uix-guest";
// ...
function ExtensionRegistration() {
useEffect(() => {
const init = async () => {
const registrationConfig = {
id: extensionId,
methods: {
rightPanel: {
addRails() {
return [
{
id: "my.company.panel_1",
header: "Last Changes",
url: '/#/rail/1',
icon: 'Export',
},
{
id: "my.company.panel_2",
header: "Workflow",
url: '/#/rail/2',
hotkey: "w",
icon: 'Import',
},
];
},
},
},
};
const guestConnection = await register(registrationConfig);
}
init().catch(console.error)
}, []);
return <Text>IFrame for integration with Host...</Text>
}
Copied to your clipboard
// RailContent.js
import { attach } from "@adobe/uix-guest";
// ...
export default () => {
const { railId } = useParams();
if (!railId) {
console.error('Rail id parameter is missed');
return;
}
// If you need to interact with an AEM instance
const connection = await attach({ id: extensionId });
return (
<Provider theme={lightTheme} colorScheme="light">
Content generate by the extension Rail#{railId}
</Provider>
);
};

API Reference

Copied to your clipboard
type RailExtensionApi = {
rightPanel: {
addRails(): ExtensionRail[];
};
};
type ExtensionRail = {
id: string;
header: string;
url: string;
icon: string;
};
PropertyTypeRequiredDescription
id
string
Rail panel identification
header
string
Aria label for the rail button.
url
string
The URL of the page to be loaded into the iframe, serving as the content source for the panel.
icon
string

Limitation

Each click on the icon corresponding to the panel will result in the re-rendering of that panel. The panel content is not cached and will be re-rendered.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.