I need an access to a Variable in VariableGroup in Azure DevOps for a Web Extension written in Html/JavaScript

69 Views Asked by At

I need to Know with full sample how to set and read the values of variable from variable group in project library in azure devops from external html page that used as web extension in the project

My Extension Manifest

{
  "manifestVersion": 1,
  "id": "pipelinedecoratorpost",
  "name": "Example Pipeline Decorator POST",
  "version": "1.0.0",
  "publisher": "oshehab",
  "scopes": [
    "vso.variablegroups_manage",
    "vso.variablegroups_read",
    "vso.project_manage"
  ],
  "targets": [
    {
      "id": "Microsoft.VisualStudio.Services"
    }
  ],
  "description": "Test Extension",
  "categories": [
    "Azure Pipelines"
  ],
  "contributions": [
    {
      "id": "TestCodeHtml",
      "type": "ms.vss-web.hub",
      "description": "Add a 'TestCodeHtml' hub to the project Settings",
      "targets": [
        "ms.vss-web.project-admin-hub-group"
      ],
      "properties": {
        "name": "Test Code Html",
        "uri": "TestCode.html"
      }
    }
  ],
  "files": [
    {
      "path": "TestCode.html",
      "addressable": true
    },
    {
      "path": "node_modules/vss-web-extension-sdk/lib",
      "addressable": true,
      "packagePath": "lib"
    }
  ]
}

My Variable Group

enter image description here

My Html Code

<!DOCTYPE html>
<html>
<head>
    <title>Azure DevOps Web Extension</title>
    <script src="lib/VSS.SDK.min.js"></script>
    <script>
        VSS.init({
            explicitNotifyLoaded: true,
            usePlatformScripts: true
        });

        VSS.ready(function () {
            VSS.require(["VSS/Service", "TFS/Core/RestClient"], function (VSS_Service, TFS_Core_RestClient) {
                VSS.getAccessToken().then(function (accessToken) {
                    var projectId = VSS.getWebContext().project.id;
                    var variableGroupId = 1;
                    var variableName = "FirstTask";

                    var restClient = VSS_Service.getCollectionClient(TFS_Core_RestClient.CoreHttpClient);

                     // Set the variable value
                     var variableValue = "New Value";
                     restClient.setVariableGroupVariableValue(variableValue, projectId, variableGroupId, variableName).then(function () {
                         console.log("Variable value set successfully.");

                        // Read the variable value
                        restClient.getVariableGroup(projectId, variableGroupId).then(function (variableGroup) {
                            var variable = variableGroup.variables.find(function (v) {
                                return v.name === variableName;
                            });
                            var value = variable.value;
                            console.log("Variable value: " + value);

                            // Display the variable value on the HTML page
                            document.getElementById("variable-value").innerText = value;
                        });
                    });
                });
            });
        });
    </script>
</head>
<body>
    <h1>Variable Value:</h1>
    <p id="variable-value"></p>
</body>
</html>

When i upload this extension i got error like in the last screen shot: /aoshehab/_apis/WebPlatformAuth/SessionToken:1
Failed to load resource: the server responded with a status of 500 ()

enter image description here

I need to Know with full sample how to set and read the values of variable from variable group in project library in azure devops from external html page that used as web extension in the project

and when i tried the previouse example i got the error in this screenshot /aoshehab/_apis/WebPlatformAuth/SessionToken:1
Failed to load resource: the server responded with a status of 500 ()

enter image description here

0

There are 0 best solutions below