Hello everyone,
When using the PrintModelEditorLightcomponent in Version 3.2.0, 3.2.1 or 3.2.2 to create a data binding (field reference), the workflow is blocked. After successfully selecting a documentModel, the subsequent dropdown/input for selecting the specific field from that model is rendered as readonly. This prevents the user from completing the data binding.
This issue was discovered during the upgrade to version 2025.06-ext4.
Steps to Reproduce:
-
Open a
printModelwithin thePrintModelEditorLightcomponent. -
Navigate to a property that can be bound to a
documentModelfield (e.g., a text field’s content). -
Initiate the data binding process.
-
Select the desired
documentModelfrom the list. -
Observe the UI for selecting the specific field from the chosen model.
Actual Result:
The field selection input is readonly, and it is not possible to select a field from the documentModel.
Expected Result:
After selecting the documentModel, the field selection should become active, presenting a tree-like structure of the model’s elements, allowing the user to navigate and select the desired field for the binding. This is the behavior observed in the standard PrintModelEditor component.
Additional Context:
The documentModel and printModel being used have been validated and work correctly in the full Simple Model Editor. The data binding and field selection (tree view) function as expected in that environment.
Furthermore, our previous implementation used the PrintEditorComponent from @com.mgmtp.a12.print/print-editor-component, which also worked without this issue. The problem appears to be specific to the PrintModelEditorLight component.
Example Code
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { PrintModelEditorLight } from "@com.mgmtp.a12.print/print-model-editor-component";
import { DocumentServiceFactory } from "@com.mgmtp.a12.kernel/kernel-md-facade";
import { PrintModelDeserializer } from "@com.mgmtp.a12.print/print-model-api-utils/lib/marshaller/deserializer/model-api-deserializer";
import { LocalizerContext } from "@com.mgmtp.a12.utils/utils-localization-react/lib/main";
import {
defaultDataFormats,
defaultLocalizerFactory,
defaultValueConversion
} from "@com.mgmtp.a12.utils/utils-localization/lib/main";
import { ModulFThemeProvider } from "@de.skhh.modulf/client-core";
import documentModelJson from "../../main/resources/models/Dokumentenmodell.json";
import printModelJson from "../../main/resources/models/default-print.json";
import { translationSource } from "../../main/typescript/localization";
const locale = { language: "de", country: "DE" };
const dataFormats = defaultDataFormats(locale);
const conversion = defaultValueConversion(dataFormats);
const localizer = defaultLocalizerFactory({ locale, dataFormats, conversion, translationSource });
const l10nContext = { locale, dataFormats, conversion, localizer };
const documentModel = new DocumentServiceFactory()
.getDocumentModelSerializer()
.deserialize(JSON.stringify(documentModelJson));
const { result: initialPrintModel } = new PrintModelDeserializer([]).deserialize(printModelJson as any);
function App() {
if(!initialPrintModel) {
return <h1>Failed to load initial print model</h1>;
}
return (
<LocalizerContext.Provider value={l10nContext}>
<ModulFThemeProvider compact>
<div style={{ width: "100vw", height: "100vh" }}>
<PrintModelEditorLight
printModel={initialPrintModel}
documentModel={documentModel}
onChange={console.log}
/>
</div>
</ModulFThemeProvider>
</LocalizerContext.Provider>
);
}
const container = document.getElementById("root")!;
createRoot(container).render(
<StrictMode>
<App />
</StrictMode>
);
Any help or ideas to solve that issue would be greatly appreciated