Gadget. Handle edit click and submit for user preferences

[Peter Sarapkin]

Hello, everyone. I’m writing Jira gadget and I want to add a possibility to edit user preferences. The problem I have, is that I don’t understand how to handle “Edit” click and submit button. So, when user clicks “Edit” I want to hide the current gadget content. And when user clicks “Save” (in html tags this is submit) I want to handle this by reloading gadget content with new user preferences.

[mohamed assedmer]

Hey Peter, I'm in this stage and I found out how to display the config form before rendering the view:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="__MSG_gadget.title__" directory_title="__MSG_gadget.title__" description="__MSG_gadget.description__">
        <Optional feature="gadget-directory">
            <Param name="categories">JIRA</Param>
        </Optional>
        <Require feature="setprefs" />
        <Require feature="views" />
        <Require feature="dynamic-height" />
        <Require feature="oauthpopup" />

        <!-- OAuth configuration -->
        <Locale messages="__ATLASSIAN_BASE_URL__/download/resources/com.atlas.tuto.atlastuto/i18n/ALL_ALL.xml"/>
    </ModulePrefs>

    <UserPref name="isConfigured" datatype="hidden" default_value="false" />
    <UserPref name="projectKey" datatype="hidden" />



    <Content type="html" view="profile">
        <![CDATA[
        #requireResource("com.atlassian.jira.gadgets:common")
        #requireResource("com.atlassian.gadgets.publisher:ajs-gadgets")
        #includeResources()


        <!-- Chart.js CDN -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

        <style>
            /* Set a fixed height for the chart */
            #chart-container {
                width: 100%;
                height: 300px; /* Adjust height as needed */
                padding: 10px 0;
            }
        </style>
        <script type="text/javascript">
            (function () {
                var gadget = AJS.Gadget({
                    baseUrl: "__ATLASSIAN_BASE_URL__",
                    useOauth: false,
                    config:{
                        descriptor: function(args){
                            var gadget = this;
                            return {
                                theme: "",
                                fields:[
                                    {
                                        id: "projectKey",
                                        userpref: "projectKey",
                                        class: "projectKey",
                                        label: "Select the project",
                                        description: "Find the project to apply the chart",
                                        type: "text",
                                        value: gadget.getPref("projectKey")
                                    },
                                    {
                                      userpref: "isConfigured",
                                      type: "hidden",
                                      value: "true"
                                    },
                                ]
                            };
                        }

                    },
                    view: {
                        template: function(args) {
                            var gadget = this;


                            var chartContainer = AJS.$("<div/>").attr({ id: "chart-container" });
                            var chartCanvas = AJS.$("<canvas/>").attr({ id: "myChart" });
                            chartContainer.append(chartCanvas);


                            gadget.getView().html(chartContainer);



                            var ctx = chartCanvas[0].getContext("2d");
                            new Chart(ctx, {
                                type: 'line',
                                data: {
                                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                                    datasets: [
                                        {
                                            label: 'Tickets',
                                            data: Array.from({length: 7}, () => Math.floor(Math.random() * 100)),
                                            borderColor: 'rgba(255, 99, 132, 1)',
                                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                            fill: false
                                        },
                                        {
                                            label: 'Solved',
                                            data: Array.from({length: 7}, () => Math.floor(Math.random() * 100)),
                                            borderColor: 'rgba(54, 162, 235, 1)',
                                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                            fill: false
                                        },
                                        {
                                            label: 'Remain',
                                            data: Array.from({length: 7}, () => Math.floor(Math.random() * 100)),
                                            borderColor: 'rgba(75, 192, 192, 1)',
                                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                            fill: false
                                        }
                                    ]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        y: {
                                            beginAtZero: true,
                                            max: 100
                                        }
                                    }
                                }
                            });


                        },
                        args: [{
                            key: "projectData",
                            ajaxOptions: function() {
                                return {
                                    url: "/rest/gadgetresource/1.0/message",
                                    contentType: "application/json"
                                };
                            }
                        }]
                    }
                });
            })();
        </script>
        ]]>
    </Content>

</Module>

My problem now is the submit and the cancel button appear without text and I'm looking to change the text of the edit button.