SOLVED

Microsoft Teams Adaptive Card Not Opening URL

%3CLINGO-SUB%20id%3D%22lingo-sub-1539949%22%20slang%3D%22en-US%22%3EMicrosoft%20Teams%20Adaptive%20Card%20Not%20Opening%20URL%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1539949%22%20slang%3D%22en-US%22%3E%3CP%3EI%20created%20a%20messaging%20extension%20that%20creates%20an%20pop%20up%20adaptive%20card%20that%20gives%20three%20options%20and%20opens%20a%20link%20based%20on%20the%20option%20chosen.%20Currently%20I%20just%20want%20the%20Open%20Sync%20Room%20button%20to%20open%20up%20to%20an%20external%20website%2C%20but%20the%20button%20doesn't%20do%20anything.%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22MST%20Adaptive%20Card%20URL%20Bug.PNG%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F207339i8D28252CE03E05C5%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22MST%20Adaptive%20Card%20URL%20Bug.PNG%22%20alt%3D%22MST%20Adaptive%20Card%20URL%20Bug.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThis%20is%20my%20code%20for%20the%20adaptive%20card.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Efunction%20syncRoom(context%2C%20action)%7B%0A%20%20%20%20const%20syncRoomList%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%7B%20name%3A%20'Room%201'%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20name%3A%20'Room%202'%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20name%3A%20'Room%203'%20%7D%2C%0A%20%20%20%20%5D%0A%20%20%20%20const%20choices%20%3D%20%5B%5D%3B%0A%20%20%20%20syncRoomList.forEach(el%20%3D%26gt%3B%20choices.push(%7B%20title%3A%20el.name%2C%20value%3A%20el.name%20%7D))%0A%20%20%20%20const%20adaptiveCard%20%3D%20CardFactory.adaptiveCard(%7B%0A%20%20%20%20%20%20%20%20actions%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20title%3A%20'Open%20Sync%20Room'%2C%0A%20%20%20%20%20%20%20%20%20%20type%3A%20%22Action.OpenUrl%22%2C%0A%20%20%20%20%20%20%20%20%20%20url%3A%20'kloud.com'%0A%20%20%20%20%20%20%20%20%7D%5D%2C%0A%20%20%20%20%20%20%20%20body%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20text%3A%20'Sync%20Rooms'%2C%20type%3A%20'TextBlock'%2C%20weight%3A%20'bolder'%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20choices%2C%20id%3A%20'MultiSelect'%2C%20style%3A%20'expanded'%2C%20type%3A%20'Input.ChoiceSet'%20%7D%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20type%3A%20'AdaptiveCard'%2C%0A%20%20%20%20%20%20%20%20version%3A%20'1.0'%0A%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20task%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20type%3A%20'continue'%2C%0A%20%20%20%20%20%20%20%20%20%20value%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20card%3A%20adaptiveCard%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20450%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20'Sync%20Room%20List'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20null%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20500%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%3B%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1539949%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1540696%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Adaptive%20Card%20Not%20Opening%20URL%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1540696%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F714579%22%20target%3D%22_blank%22%3E%40marcusyoung%3C%2FA%3E%26nbsp%3B%2C%20Can%20you%20try%20using%20%22%3CA%20href%3D%22https%3A%2F%2Fkloud.com%2F%26quot%3B%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fkloud.com%2F%22%3C%2FA%3E%26nbsp%3Binstead%20of%20%22kloud.com%2F%22%20for%26nbsp%3B%20%3CEM%3Eaction%3A%20url%3C%2FEM%3E%20property.%20It%20expect%20a%20valid%20URI.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1542176%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Adaptive%20Card%20Not%20Opening%20URL%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1542176%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F451628%22%20target%3D%22_blank%22%3E%40subhasish-MSFT%3C%2FA%3E%2C%26nbsp%3BThanks%20for%20your%20help%2C%20It%20worked!%20Another%20question%2C%20how%20do%20I%20access%20the%20option%20that%20I%20have%20chosen%20in%20the%20card%3F%20Ideally%20I'd%20like%20the%20open%20sync%20room%20button%20to%20go%20to%20a%20different%20website%20depending%20on%20what%20option%20is%20chosen.%20Is%20there%20a%20way%20to%20do%20this%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1543148%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Adaptive%20Card%20Not%20Opening%20URL%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1543148%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F714579%22%20target%3D%22_blank%22%3E%40marcusyoung%3C%2FA%3E%26nbsp%3B%2C%3CBR%20%2F%3E%3CBR%20%2F%3EAdaptive%20card%20%22OpenURL%22%20action%20can%20not%20be%20modified%20with%20selected%20value.%20You%20could%20keep%20three%20different%20buttons%20with%20different%20URLs.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EOr%20you%20could%20render%20a%20HTML%20page%20inside%20the%20task%20module%20and%20modify%20the%20button%20URL%20based%20on%20user%20selection%20of%20choice.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1559582%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Adaptive%20Card%20Not%20Opening%20URL%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1559582%22%20slang%3D%22en-US%22%3EWhere%20can%20I%20find%20more%20info%20on%20rendering%20the%20HTML%20page%3F%20I%20have%20more%20than%206%20links%20so%20the%20buttons%20won't%20work%3C%2FLINGO-BODY%3E
Occasional Contributor

I created a messaging extension that creates an pop up adaptive card that gives three options and opens a link based on the option chosen. Currently I just want the Open Sync Room button to open up to an external website, but the button doesn't do anything.MST Adaptive Card URL Bug.PNG

This is my code for the adaptive card.

 

function syncRoom(context, action){
    const syncRoomList = [
        { name: 'Room 1' },
        { name: 'Room 2' },
        { name: 'Room 3' },
    ]
    const choices = [];
    syncRoomList.forEach(el => choices.push({ title: el.name, value: el.name }))
    const adaptiveCard = CardFactory.adaptiveCard({
        actions: [{
          title: 'Open Sync Room',
          type: "Action.OpenUrl",
          url: 'kloud.com'
        }],
        body: [
          { text: 'Sync Rooms', type: 'TextBlock', weight: 'bolder'},
          { choices, id: 'MultiSelect', style: 'expanded', type: 'Input.ChoiceSet' },
        ],
        type: 'AdaptiveCard',
        version: '1.0'
      });

      return {
        task: {
          type: 'continue',
          value: {
            card: adaptiveCard,
            height: 450,
            title: 'Sync Room List',
            url: null,
            width: 500
          }
        }
      };
}

 

 

4 Replies
Best Response confirmed by marcusyoung (Occasional Contributor)
Solution

@marcusyoung , Can you try using "https://kloud.com/" instead of "kloud.com/" for  action: url property. It expect a valid URI.

@subhasish-MSFT, Thanks for your help, It worked! Another question, how do I access the option that I have chosen in the card? Ideally I'd like the open sync room button to go to a different website depending on what option is chosen. Is there a way to do this?

@marcusyoung ,

Adaptive card "OpenURL" action can not be modified with selected value. You could keep three different buttons with different URLs. 

Or you could render a HTML page inside the task module and modify the button URL based on user selection of choice. 

Where can I find more info on rendering the HTML page? I have more than 6 links so the buttons won't work