Hello,I am trying to create a custom UI component that will take input the image reference, height, width and unit (px, pt, %). It will display the image in the UI with provided height width. I need this as it is on of my requirement. I need to set custom height width of image.Now, How to achieve this. I had created a project like below:custom-image-plugin/ ├── webpack.config.js ├── package.json├── appian-component-plugin.xml└── src/ └── customImage/ ├── ImageComponent.jsx └── index.jsBuild this component and added to the zip file the build js and appian-component-plugin.xml and trying to deploy as plugin, but it failed. Can't find any logs why it is failed.Help needed1. How to achieve this?
2. Where to find the logs for the failure.
Discussion posts and replies are publicly visible
I do not see any index.html. Did you follow the documentation closely? You can also download one of the existing component plugins and inspect its structure.
Hi Stefan Helzle ,It would be great if you prove the documentation link and how to download the existing component? It would be more helpful.
The Appian documentation has a search option ... and the link to the UI SDK is prominently on the start page
And you can download any existing plugin from the appmarket here in the community.
Follow the rule as per the documentation. But still it is failing. But I can't find the logs. How to troubleshoot why it is failing?
Did you check the tomcat stdout log file?
Thanks for all your help. It successfully deployed. But I found an issue that it is not rendering the document, Image. It is very obvious that it will not because `a!documentImage` not provide any URL that to be rendered. But also, if I use any public web URL of an image it won't rendered. May I know what I am missing or what should I do to achieve that. The HTML is as follows:
<!DOCTYPE html> <html> <head> <script src="APPIAN_JS_SDK_URI"></script> <style> body { margin: 0px; } #content-container { background-color: transparent; overflow: auto; text-align: center; } #content-container img { display: inline-block; max-width: 100%; height: auto; } </style> </head> <body> <div id="content-container"> <p>No image provided.</p> </div> <script> Appian.Component.onNewValue(function (newValues) { let imgRef = newValues.imageReference; let height = newValues.height || 'auto'; let width = newValues.width || 'auto'; let unit = newValues.unit || 'px'; if (!['px', 'pt', '%'].includes(unit)) { unit = 'px'; } const container = document.getElementById('content-container'); container.innerHTML = ''; // Clear previous contents if (imgRef) { const img = document.createElement('img'); img.src = imgRef; img.style.height = height === 'auto' ? 'auto' : height + unit; img.style.width = width === 'auto' ? 'auto' : width + unit; container.appendChild(img); } else { container.innerHTML = '<p>No image provided.</p>'; } }); </script> </body> </html>