title: Use Adaptive Cards Designer, then replace sample values with real ones in C#
body: <h2>The goal</h2>
  
  <p>I want to create (and then edit) Adaptive Cards designs with the <a href="https://adaptivecards.io/designer/" rel="nofollow noreferrer">Adaptive Cards Designer</a> and use them in my bot.</p>
  
  <h2>The steps</h2>
  
  <p>1) I created my Adaptive card in the <a href="https://adaptivecards.io/designer/" rel="nofollow noreferrer">Designer</a>, with sample values, and copied its JSON representation. For example:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "FactSet",
        "id": "myFactSet",
        "facts": [
          {
            "title": "Name:",
            "value": "John Doe"
          }
        ]
      }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
   }
  </code></pre>
  
  
  
  <p>2) Now I want to use this card's design in my C# Bot Framework bot. I put this JSON into my project, where AdaptiveCards v1.1.0 nuget package is included. </p>
  
  <p>3) I parse the card JSON into AdaptiveCards library classes with this line of code:</p>
  
  <pre><code>var card = AdaptiveCard.FromJson(card).Card;
  </code></pre>
  
  <p>4) Before sending the card to the user I have to fill it with real values, replacing the sample data. </p>
  
  <h2>The questions</h2>
  
  <ol>
  <li><p>How do I replace <code>"John Doe"</code> with a real user name? What is the simplest approach? (I already wrote an extension method to get an <code>AdaptiveElement</code> by its id, so I can easily change its values. But tell me please if there is a simpler approach)</p></li>
  <li><p>And how do I clone an existing <code>AdaptiveElement</code> and put other values into it? For example, if I want to add another <code>FactSet</code> to the card by copying existing <code>myFactSet</code> with all the same style? <code>AdaptiveElement</code> has no <code>Clone()</code> method.</p></li>
  </ol>
  
  <h2>Why other solutions don't fit</h2>
  
  <h3>Write it in C#</h3>
  
  <p>I want to be able to easily edit the card's design with the Designer, but if I rewrite the whole card in C# code, I'll have to do make a change to it every time the card's design changes, and I won't see the result in the Designer.</p>
  
  <h3>Do it in javascript</h3>
  
  <p>I understand it's easily done with javascript, but I use C# in my bot.</p>
  
  <h3>Parse JSON and work with it</h3>
  
  <p>I also understand that I can parse the card into <code>JsonObject</code> and deal directly with <code>JsonObject</code>s, clone them, change their properties, but </p>
  
  <ol>
  <li><p>they are not typed, so there's no IntelliSense support and I can make a typo</p></li>
  <li><p>I still have to walk all the elements to find the one with the given id (by the way, is there an extension method to easily do this?) </p></li>
  <li><p>Using <code>JsonObject</code> will not eliminate the need of AdaptiveCards library and the need to call <code>AdaptiveCard.FromJson(card)</code> method (because setting <code>Attachment.Content</code> to a <code>JsonObject</code> doesn't work for some reason).</p></li>
  </ol>