Why am I unable to send a variable as URL in a Planner Task reference?

Question

I am trying to set references for a task via the Planner Graph API, but am unable to set the URL through a variable.

I have written a separate method for encoding the url, and it returns the correct value, but still the references aren't set for the Planner task.

const updateAttachedFiles = (
    links: string[],
    taskId: string,
    etag: string
  ) => {
    var encodedLink: string; 
    links.forEach(async (link) => {
      encodedLink = escapeHtml(link)
      await graph.planner.tasks.getById(taskId).details.update(
        {
          references: {
            encodedLink : {
              "@odata.type": "microsoft.graph.plannerExternalReference",
              "previewPriority": " !",
              type: "Other",
            },
          },
        },
        etag);
    }
    )
  };

 const escapeHtml = (unsafe) => {
    let temp = unsafe.replaceAll("%", "%25")
    unsafe = temp
    .replaceAll(".", "%2E")
    .replaceAll(":", "%3A")
    .replaceAll("@", "%40")
    .replaceAll("#", "%23");

     return unsafe

  }

But if I change encodedLink to the hardcoded URL (copied from the value set in the variable encodedLink), it works.

{
          references: {
            "https%3A//shmafe%2Esharepoint%2Ecom/sites/PlannerTest1/Delade dokument/nedladdning%2Ejpg" : {
              "@odata.type": "microsoft.graph.plannerExternalReference",
              "previewPriority": " !",
              type: "Other",
            },
          },
        }

I need to be able to set the link dynamically, so how can I do it without being able to use a variable? Am I doing something else wrong?

Microsft documenttion for Update plannertaskdetails https://learn.microsoft.com/en-us/graph/api/plannertaskdetails-update?view=graph-rest-1.0&tabs=javascript

Microsft documenttion for plannerExternalReferences resource type https://learn.microsoft.com/en-us/graph/api/resources/plannerexternalreferences?view=graph-rest-1.0

Hi Magdalena! Side note, I highly recommend removing your `escapeHtml` function and replacing it with a call to `encodeURI(link)`. [Link to docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) — Rob M., Nov 05 '21 at 07:07
Yes, I tried both encodeURI and encodeURIcomponent, but none of them encoded the right characters, since I only wanted to encode ". : % @ #" and not for example "/". So I found no other solution than to write my own. — Magdalena Fernlund, Nov 05 '21 at 07:44

score 0 · Accepted Answer · answered Nov 05 '21 at 07:12

To use a variable as an object key, you need to use the bracket syntax

For example:

const myVariable = 'hello';
const demoObject = {
  [myVariable]: 'world'
};

console.log(demoObject[myVariable]);
// same as
console.log(demoObject.hello);

This should fix it:

const updateAttachedFiles = (
    links: string[],
    taskId: string,
    etag: string
  ) => {
    var encodedLink: string; 
    links.forEach(async (link) => {
      encodedLink = encodeURI(link)
      await graph.planner.tasks.getById(taskId).details.update(
        {
          references: {
            [encodedLink] : {
              "@odata.type": "microsoft.graph.plannerExternalReference",
              "previewPriority": " !",
              type: "Other",
            },
          },
        },
        etag);
    }
  )
};

Why am I unable to send a variable as URL in a Planner Task reference?

1 Answers1