Update web-item dynamically

Hi ,

I am using atlassian-connect webitem module .
It has an inline dialog which has a form with three radio buttons and a update button . when I click on the update button I want the web-item value to be changed with the selected value from radio button.

I am using JavaScript to update the value but unable to do so as the web-item element is not accessible from the i-frame.

Is there anyway I can achieve this.
here is the web-item module

{
                "url": "/display-web-item.html?web-item=page.metadata.banner",
                "location": "page.metadata.banner",
                "context": "addon",
                "weight": 9999,
                "target": {
                    "type": "inlinedialog",
                    "options": {}
                },
                "tooltip": {
                    "value": "Sample tooltip"
                },
                "key": "sampe-web-item",
                "name": {
                    "value": "Item 1"
                },
                "conditions": [
                    {
                        "condition": "user_is_logged_in"
                    }
                ]
            }

Sample Html

<div>
	
    <div id="option-list">
	  <input type="radio" id="Item_1" name="fav_item" value="Item 1">
	  <label for="Item_1">Item 1</label><br>
	  <input type="radio" id="Item_2" name="fav_item" value="Item 2">
	  <label for="Item_2">Item_2</label><br>
	  <input type="radio" id="Item_3" name="fav_item" value="Item 3">
	  <label for="Item_3">Item 3</label>
	</div>
	<div style="text-align:right">
        	<button class='aui-button' id='update-button'>
            		<span class='aui-icon aui-icon-small aui-iconfont-approve'></span> Update
        	</button>
     </div>
</div>

Sample Script

$('#update-button').on('click', function(){
AJS.$("#pluginKey__sample-web-item").html("newValue")
})

If user selects Item_3 , the webitem value should be changed to item-3.
Thanks

Hi @RitupurnaBISWAL,

as far as I’m aware, doing stuff like this is not possible in Confluence Cloud. As you correctly stated, your app resides in an iframe, which means it cannot manipulate the Confluence UI.

In Connect, the only way to affect the Confluence UI is through the Connect JavaScript API, which let’s you use things like dialogs or flags, but not perform arbitrary DOM manipulations.

Cheers,
Sven