Update web-item dynamically

Confluence Development Confluence Cloud
,
1

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

2

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

3

Hi @SvenSchatter , is there any alternative solution ?

4

Depending on what you’re trying to achieve, maybe it helps you to know that the Content Byline Item takes a contentPropertyKey. This mechanism is the closest you’ll get to dynamically modifying text values of your Connect modules. Other than that, you only have control over what lives within in your iframe.

Hope this helps!

5

Thank you @SvenSchatter for the reply .
As you mentioned , currently we are using content Byline Item but our users requesting to put the item in a more prominent place like next to page name (“page.metadata.banner”) .

Thank you so much again for taking time to look into this . Please keep me posted if you get anything related .

Regards,
Ritu