3 Replies Latest reply on Sep 20, 2017 5:18 AM by kristamahler

    Help! Transfer HTML form code from Widget to Tile format

    kristamahler

      Hello,

      I have a form in my community that we use quite often.  This form allows customers to order more outreach materials.  It is a simple form that created a document in another group and populated that document with their requested items.  Then we take that document and manually process it with our warehouse.  The code was built be a developer at JCS when they helped us build our community.  I'm now rebuilding the community in tiles and I want to transfer this HTML code from the existing widget to a HTML tile.  When I tried it (by simply copy and pasting the entire code into a HTML tile), the form didn't send the info to create the doc in the designated group that we use to collect and process the orders.

       

      Can anyone help me figure out how to make the code transfer?  I don't speak HTML at all and don't have anyone at work that can assist.

       

      Secondly, I'd like to ensure this code is mobile friendly so that when it is in a tile, people can access the form from a mobile device.

       

      Thanks!

       

      Message was edited by: Krista Mahler

        • Re: Transfer HTML From code from Widget to Tile
          kristamahler

          Can anyone help me with the situation above?  I don't speak HTML and I cannot for the life of me figure it out.  When I have transferred my previous HTML code from an HTML widget into a tile, the form appears (as seen below in my screenshot preview of the tile, but when I activate the tile, the form doesn't actually save as a document into the group we have created for collecting for forms.  I can't figure out why it won't save the form.  In a widget, a little green bar pops up saying the form has been submitted, but that doesn't happen when I have the same code in an HTML tile. 

           

          Any support would be MUCH appreciated.  My customers need this form and I need help figuring it out!

           

          Thanks!

           

          Here is the preview of the form in an HTML tile

           

          Here is a screenshot of the form saved and "active" in the tile format...but nothing happens when I click submit.

          Here is the code I have placed into the HTML tile to create the form above.  I have verified that it is mobile friendly.  I just can't figure out why it won't submit (in turn creating a document that is saved to the designated group etc.

           

          <html>

           

           

          <head>

          <style>

              body {

                  color: #5e5e5e;

                  font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

              }

          </style>

          </head>

           

           

          <body>

          <h3>GLCA Outreach Materials Order Form</h3>

          <p><!DOCTYPE html>

           

           

          <!--

          Description:

          This is Jive Form Widget that will take in information from a form and create a document using ajax. In order to create jive content a dummy user account needs to be created. The only permissions that a dummy account should have is "create" in the target space. 

           

           

          Inside the Script tag below will be four variables that need to be changed:

           

           

          Username: Replace the empty string with the username of your dummy account.

          Password: Replace the empty string with the password of your dummy account.

          baseUrl:  Replace the empty string with the base url of your instance e.g. var baseUrl = "https://yourinstance.jiveon.com";

           

           

          placeid:  This one is tricky. You need to get the PlaceID from the jive API. You can do this by getting the space ID from the admin console. go to https://yourinstance.jiveon.com/admin/content-main.jsp?communityID=1 and find the space you want to save the content to. copy the Space id. Go this url, after you replace "SpaceID" with the space id you got from the admin console.

           

           

          https://yourinstance.jiveon.com/api/core/v3/places?filter=entityDescriptor(14,SpaceID)&fields=placeID

           

           

          One of the last items on the space will be the placeid. It will look like this:

           

           

          "placeID" : "1512",

           

           

          Assign the placeid variable to the placeID you just got.

          -->

           

           

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

           

           

           

           

           

            <div class="container">

             

             

                <style>

              .inner {

                display: none;

                width: 100%;

                clear: both;

                position: relative;

                top: 10px;

              }

                #wrapper{

                min-height: 700px;

                }

                #reqalert {

                padding: 0;

                position: relative;

                display:none;

                z-index: 2;

                }

           

           

              </style>

           

           

              <div class="row">

                  <div id="wrapper" class="col-md-6 well">

                    <h2>[Connections Academy] Outreach Materials Form</h2>

           

           

                  <p>Are you out of your outreach materials? Request more by selecting the materials you wish to receive. Please only click the submit button once! Your order will be approved within 7 days, and then it will take 1-2 weeks to arrive to your home. Please note that requests will be filled based on availability of items. If we are out of an item, we will refill your other items. Thank you for your patience. <p>Don't forget that you can also visit the school store for school branded gear! <a

          href="https://proformaprostores.com/Category"target="_blank">www.ConnectionsAcademyStore.com</a></p>

                  <p><a href="https://www.cluborangecorner.com/docs/DOC-1068" target="_blank">Current Connections Academy Outreach Materials</a></p>

           

           

           

           

                    <div class="form-group">

                      <label for="large-posters">Large 11" x 14" tear-off tab posters</label>

                      <div class="radio">

                        <label>

                          <input id="large-posters1" name="large-posters" type="radio" value="No large posters needed at this time." checked />No large posters needed at this time.

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                         <input id="large-posters2" class="radio" name="large-posters" type="radio" value="5 posters" />5 posters

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                          <input id="large-posters3" class="radio" name="large-posters" type="radio" value="10 posters" />10 posters

                        </label>

                      </div>

                    </div>

           

           

                    <div class="form-group">

                      <label for="small-posters">Small 8.5" x 11" tear-off tab posters</label>

                      <div class="radio">

                        <label>

                          <input id="small-posters1" name="small-posters" type="radio" value="No small posters needed at this time." checked />No small posters needed at this time.

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                         <input id="small-posters2" name="small-posters" type="radio" value="5 posters" />5 posters

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                          <input id="small-posters3" name="small-posters" type="radio" value="10 posters" />10 posters

                        </label>

                      </div>

                    </div>

           

           

                    <div class="form-group">

                      <label for="learnmore-flyers">"Easy Ways to Learn More" Flyers</label>

                      <div class="radio">

                        <label>

                          <input id="learnmore-flyers1" name="learnmore-flyers" type="radio" value="No flyers needed at this time." checked />No flyers needed at this time.

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                          <input id="learnmore-flyers2" name="learnmore-flyers" type="radio" value="5 flyers" />5 flyers

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                          <input id="learnmore-flyers3" name="learnmore-flyers" type="radio" value="10 flyers" />10 flyers

                        </label>

                      </div>

                    </div>

                   

                 

                    <div class="form-group">

                      <label for="cards">Referral Cards</label>

                      <div class="radio">

                        <label>

                          <input id="cards1" name="cards" type="radio" value="No referral cards needed at this time." checked />No referral cards needed at this time.

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                         <input id="cards2" name="cards" type="radio" value="1 pack (10 referral cards)" />1 pack (10 referral cards)

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                          <input id="cards3" name="cards" type="radio" value="2 packs (20 referral cards)" />2 packs (20 referral cards)  

                        </label>

                      </div>

                    </div>

           

           

                    <div class="form-group">

                      <label for="pens">Pens</label>

                      <div class="radio">

                        <label>

                          <input id="pens1" name="pens" type="radio" value="No pens needed at this time." checked />No pens needed at this time.

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                         <input id="pens2" name="pens" type="radio" value="10 pens" />10 pens

                        </label>

                      </div>

                      <div class="radio">

                        <label>

                          <input id="pens3" name="pens" type="radio" value="20 pens" />20 pens

                        </label>

                      </div>

                    </div>

           

           

                    <div class="form-group">

                      <label for="firstname">First Name:</label>

                      <input id="firstname" class="form-control" type="text" name="firstname" value =""/>

                    </div>

                    <div class="form-group">

                      <label for="lastname">Last Name:</label>

                      <input id="lastname" class="form-control" type="text" name="lastname" value =""/>

                    </div>

                    <div class="form-group">

                      <label for="street">Street:</label>

                      <input id="street" class="form-control" type="text" name="street" value =""/>

                    </div>

                    <div class="form-group">

                      <label for="city">City:</label>

                      <input id="city" class="form-control" type="text" name="city" value =""/>

                    </div>

                    <div class="form-group">

                      <label for="state">State:</label>

                      <input id="state" class="form-control" type="text" name="state" value =""/>

                    </div>

                    <div class="form-group">

                      <label for="zip">Zip:</label>

                      <input id="zip" class="form-control" type="text" name="zip" value =""/>

                    </div>

                    <div class="form-group">

                      <label for="email">Email:</label>

                      <input id="email" class="form-control" type="email" name="email" value =""/>

                    </div>

           

           

                    <div class="form-group">

                      <label>Please leave any comments or feedback you wish to include in your order (including other branded gear you wish to request and/or t-shirt sizes for your family):</label>

                      <textarea id="comments" class="form-control" rows="6" name="comments" ></textarea>

                    </div>

                    <div class="form-group">

                      <button  type="submit" name="submit" id="submit" class="btn btn-default col-md-2">Submit</button>

                      <div id="reqalert" class="small alert alert-info col-md-4" role="alert"><p id="alerts"></p></div>

                    </div>

                    <div class="inner panel panel-default" style="border-color: #88CA88; background: #DDFADD;">

                      <div class="panel-body" style="padding: 6px 11px;">

                        The form has been submitted.

                      </div>

                    </div>

                  </div>

           

           

                </div>

            </div>

            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

            <!-- Include all compiled plugins (below), or include individual files as needed -->

            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

            <script type="text/javascript">

            //-------------------------------------------------------->

            //-------------------------------------------------------->

           

           

            //Change the Username and Password to your dummy User

              var jUsername  = "apiaccess";

              var jPassword  = "api@ccess";

           

           

              var baseUrl   = "https://www.cluborangecorner.com" ; //var baseurl "https://jivedemo-jcs.jiveon.com";

              var placeid   = "1512"; // placeid of space that content will be saved to. Read instructions at the top of the page.

            //--------------------------------------------------------> 

            //-------------------------------------------------------->

              var $j = jQuery.noConflict();

               

              $j("#submit").click(function() {

                var requested = "Please fill in: "

                $j(":input").each(function(index, elm){

                  if($j(elm).val()==""&& elm.name!=="submit" && elm.name!=="comments") {

                    console.log(elm.name);

                    requested = requested + elm.name;

                    requested = requested +", ";

                  }

                });

                if(requested !== "Please fill in: "){

                  $j("#alerts").html(requested);

                  $j( "#reqalert" ).show();

                  setTimeout(function() {$j("#reqalert").hide();},5000);

                  return;

                }

                  var comments = $j("textarea[name='comments']").val();

                  var firstname = $j("#wrapper input[name=firstname]").val();

                  var lastname = $j("#wrapper input[name=lastname]").val();

                  var email = $j("#wrapper input[name=email]").val();

                  var street = $j("#wrapper input[name=street]").val();

                  var city = $j("#wrapper input[name=city]").val();

                  var state = $j("#wrapper input[name=state]").val();

                  var zip = $j("#wrapper input[name=zip]").val();

           

           

                  var largeposters = $j("#wrapper input:radio[name=large-posters]:checked").val();

                  var smallposters = $j("#wrapper input:radio[name=small-posters]:checked").val();

                  var lmflyers = $j("#wrapper input:radio[name=learnmore-flyers]:checked").val();

                  var toflyers = $j("#wrapper input:radio[name=takeone-flyers]:checked").val();

                  var cards = $j("#wrapper input:radio[name=cards]:checked").val();

                  var pens = $j("#wrapper input:radio[name=pens]:checked").val();

           

           

                  var title = "";

           

           

                  $j.ajax({

                      type:"get",

                      contentType:"application/json",

                      headers: {"Authorization": "Basic " + btoa(jUsername + ":" + jPassword)},

                      url : baseUrl + '/api/core/v3/contents',

                      async: false,

                      dataType: "json",

                      complete: function(data) {

                          _data = data.responseText;

           

           

                          var myObj = JSON.parse(_data.replace(/throw.*;/, "").trim());

           

           

                          if (myObj.list[0] !== null) {

                            title = "[Connections Academy] Materials Request Order (#"+ myObj.list[0].contentID + ")";

                          } else {

                            title = "[Connections Academy] Materials Request Order (#1)";

                          }

                         

                        }

                  });

                 

                  var body = "<h2 style=\"text-align: center;\">Order Materials</h2> " +

                          "<table border=\"1\" class=\"jiveBorder\" style=\"border: 1px solid #c6c6c6; width: 100%;\" " +

                          "jive-data-cell=\"{&quot;color&quot;:&quot;#3D3D3D&quot;,&quot;textAlign&quot;:&quot;center&quot;," +

                          "&quot;padding&quot;:&quot;6&quot;,&quot;backgroundColor&quot;:&quot;transparent&quot;,&quot;fontFamily&quot;:&quot;Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif&quot;,&quot;verticalAlign&quot;:&quot;baseline&quot;}\" " +

                          "jive-data-header=\"{&quot;color&quot;:&quot;#505050&quot;,&quot;backgroundColor&quot;:&quot;#F2F2F2&quot;," +

                          "&quot;textAlign&quot;:&quot;center&quot;,&quot;padding&quot;:&quot;6&quot;,&quot;fontFamily&quot;:&quot;" +

                          "Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif&quot;,&quot;verticalAlign&quot;:&quot;baseline&quot;}\">" +

                          "<tbody><tr><td style=\"padding: 6px; text-align: left; width: 20%;\"><strong>Large 11\" x 14\" tear-off tab posters</strong>" +

                          "</td><td style=\"padding: 6px; text-align: left;\">"+largeposters+"</td></tr>" +

                          "<tr><td style=\"padding: 6px; text-align: left;\">" +

                          "<strong>Small 8.5\" x 11\" tear-off tab posters</strong></td><td style=\"padding: 6px;\">"+smallposters+"</td></tr>" +

                          "<tr><td style=\"padding: 6px; text-align: left;\"><strong>\"Easy Ways to Learn More\" Flyers</strong></td><td style=\"padding: 6px;\">"+lmflyers+"</td></tr>" +

                          "<tr><td style=\"padding: 6px; text-align: left;\"><strong>Take-One Flyers</strong></td><td style=\"padding: 6px;\">"+toflyers+"</td></tr>" +

                          "<tr><td style=\"padding: 6px; text-align: left;\"><strong>Referral Cards</strong></td><td style=\"padding: 6px;\">"+cards+"</td></tr>" +

                          "<tr><td style=\"padding: 6px; text-align: left;\"><strong>Pens</strong></td><td style=\"padding: 6px;\">"+pens+"</td></tr>" +

                          "</tbody></table>" +

                          "<h2 style=\"text-align: center;\">Requestor Details</h2>" +

                          "<table border=\"1\" class=\"jiveBorder\" style=\"border: 1px solid #c6c6c6; width: 100%;\"" +

                          " jive-data-cell=\"{&quot;color&quot;:&quot;#3D3D3D&quot;,&quot;textAlign&quot;:&quot;left&quot;," +

                          "&quot;padding&quot;:&quot;6&quot;,&quot;backgroundColor&quot;:&quot;transparent&quot;," +

                          "&quot;fontFamily&quot;:&quot;Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif&quot;," +

                          "&quot;verticalAlign&quot;:&quot;baseline&quot;}\" jive-data-header=\"{&quot;color&quot;:&quot;#505050&quot;," +

                          "&quot;backgroundColor&quot;:&quot;#F2F2F2&quot;,&quot;textAlign&quot;:&quot;left&quot;,&quot;padding&quot;:" +

                          "&quot;6&quot;}\"><tbody><tr><td style=\"padding: 6px; width: 20%;\">" +

                          "<strong>Full Name</strong></td><td style=\"padding: 6px;\">"+firstname+" "+lastname+"</td></tr>" +

                          "<tr><td style=\"padding: 6px;\"><strong>Email</strong></td><td style=\"padding: 6px;\">"+email+"</td></tr>" +

                          "<tr><td style=\"padding: 6px;\"><strong>Street</strong></td><td style=\"padding: 6px;\">"+street+"</td></tr>" +

                          "<tr><td style=\"padding: 6px;\"><strong>City</strong></td><td style=\"padding: 6px;\">"+city+"</td></tr>" +

                          "<tr><td style=\"padding: 6px;\"><strong>State</strong></td><td style=\"padding: 6px;\">"+state+"</td></tr>" +

                          "<tr><td style=\"padding: 6px;\"><strong>Zip</strong></td><td style=\"padding: 6px;\">"+zip+"</td></tr>" +

                          "<tr><td style=\"padding: 6px;\"><strong>Comments</strong></td><td style=\"padding: 6px;\">"+comments+"</td></tr>" +

                          "</tbody> </table> <p></p>";

           

           

                  var jsonData = {

                      "content":{

                          "type": "text/html",

                          "text": body

                      },

                      "subject": title,

                      "type": "document"

                  };

           

           

                  $j.ajax({

                      type:"post",

                      contentType:"application/json",

                      headers: {"Authorization": "Basic " + btoa(jUsername + ":" + jPassword)},

                      url : baseUrl + '/api/core/v3/places/'+placeid+'/contents',

                      data : JSON.stringify(jsonData),

                      dataType: "json",

                      complete: function(data) {

                          _data = data.responseText;

                          $j(".inner").show("fold","slow");

                      }

                  });

              });

           

           

            </script>

           

           

          </p>

          </body>

           

           

          </html>           

            • Re: Help! Transfer HTML form code from Widget to Tile format
              jgoldhammer

              Hi Krista,

              due to the security restrictions of Jive html tiles you cannot make a normal Ajax call which is blocked by the browser:

               

              $j.ajax({

                          type:"post",

                          contentType:"application/json",

                          headers: {"Authorization": "Basic " + btoa(jUsername + ":" + jPassword)},

                          url : baseUrl + '/api/core/v3/places/'+placeid+'/contents',

                          data : JSON.stringify(jsonData),

                          dataType: "json",

                          complete: function(data) {

                              _data = data.responseText;

                              $j(".inner").show("fold","slow");

                          }

                      });

               

              As you can see here in the 1st column - Access to Jive V3 REST API which is needed to create the document is not possible with the html tile!

              Custom HTML in Your Jive Community

               

              You have to convert the code into a jive hosted custom-view-tile and use osapi (https://community.jivesoftware.com/docs/DOC-185776#jive_content_id_OSAPI_API)  instead of using Ajax directly...

               

              Besides that- the approach to use a dummy account directly in HTML is not secure in my eyes! Everybody who wants can use this account to create fake content in your community. If the content needs to be created by another user a middleware solution is needed...

               

              PM me if you need help for this.

               

              Thanks

              Jens