20 Replies Latest reply on Jul 20, 2016 7:36 AM by simon.wermelinger

    Order Form in html widget should create a jive document with the form content

    simon.wermelinger

      Hello

       

      We created a html order form in the html widget and now I likte to get the from Content by click to a Jive document... Do you see there a possibility to do it?

       

      Kind regards

      Simon

        • Re: Order Form in html widget should create a jive document with the form content
          vishal_grazitti

          Simon Wermelinger

           

          I think you will need to provide more details here. Are you trying to create a document with form content or trying to prepopulate the form with some document?

            • Re: Order Form in html widget should create a jive document with the form content
              simon.wermelinger

              Hello Vishal Sharma  

               

              It is like that

               

              There is a html form and in that form you can add different products to you order. The green button is where you can add an additional line for a different product. The red button beneath is to clear the form that it's empty again.

               

              What I now like to have is that i create a button and when you click on it, it takes all products and the quantity that I added, create a jive document and put it in there and save it under content.

                • Re: Order Form in html widget should create a jive document with the form content
                  vishal_grazitti

                  Is this a Jive hosted app or Self hosted?

                   

                  If you are hosting it yourself, You can always implement the Jive Rest API to create a document from your form content. Here is an example: How to POST to a Service from a Tile

                   

                  If its Jive hosted, I would suggest using tile than HTML Widget (since jive has been promoting tiles for future) and use client side Java script API to create the document. Make sure the logged in user has right permissions to create the document since the client side java script API will execute on behalf of logged in user.

                  3 people found this helpful
                    • Re: Order Form in html widget should create a jive document with the form content
                      simon.wermelinger

                      Hello Vishal Sharma

                       

                      Sorry for the late Response. I'm just gathering inforamtion for the Person who can programming this Thing. But for now we did the ordering form but we were not capable to get any further Progress with you Information. Can you mabe give an example how the Code should look like if you simply wanna create a document with this test Thing:

                       

                      {

                        "content":

                            {

                            "type": "text/html",

                            "text": "<body><p>Some interesting text</p></body>"

                            },

                        "subject": "New Document"

                      }

                       

                      And if you like to have tricky puzzles this is our form, and from the Things what we choose we like to create a document with

                       

                      best regards

                      Simon

                       

                      P.S.: Here is our script

                      <!DOCTYPE HTML>
                      <html ng-app="mqapp">
                      <head>
                          <!--[if IE]>
                              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                            <![endif]-->
                          <title>Test SVA BL Dyn Form </title>
                          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
                          <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
                          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
                          <script src="https://sva-bl.jiveon.com/resources/statics/1574/svaorderform.js?a=1466588399966"></script>

                          <style>
                              .divLeft40 {
                                  margin-left: 40px;
                                  height: 800px;
                              }

                              .br10px {
                                  margin-top: 10px;
                              }

                              .svaOrderFormTitle {
                                  margin-left: -14px;
                                  margin-bottom: 10px;
                                  font-size: 14px;
                                  font-weight: normal;
                                  font-family: sans-serif;
                              }

                              .catTitle {
                                  font-size: 20px;
                                  font-weight: normal;
                                  font-family: sans-serif;
                              }

                              .tblForm {
                                  width: 100%;
                              }

                              .spacerF {
                                  margin-top:35px;
                              }
                          </style>

                          <script>
                              function myFunction() {
                                  location.reload();
                              }
                          </script>

                       

                      </head>

                      <body class="divLeft40">

                       

                          <div>
                              <form class="form-inline"  method="post" action="/contents"  >

                                  <table class="tblForm">
                                      <tr>
                                          <td valign="top" width="33%">

                                              <!-- Start Hilfsmittel -->
                                              <div ng-controller="MainCtrl">

                                                  <div class="row" style="max-width:95%">

                                                      <div class="panel panel-default">
                                                          <div class="panel-body">
                                                              <p class="catTitle">Hilfsmittel</p>
                                                              <fieldset data-ng-repeat="choice in choices">

                                                                  <input type="text" class="form-control" style="max-width:80px;" ng-model="choice.value" name="" value="" placeholder="Anzahl">

                                                                  <select class="form-control" style="min-width:300px">
                                                                      <option selected>Bitte Artikel auswählen</option>
                                                                      <option>Additionsrollen für Rechenmaschine, 57mm</option>
                                                                      <option>Air-Duster (Luft)</option>
                                                                      <option>Bildschirm- und Tastaturreiniger</option>
                                                                      <option>Bleistiftspitzer Metall</option>
                                                                      <option>Bostitch-Apparat</option>
                                                                      <option>Bostitch-Klammern klein, SB 8</option>
                                                                      <option>Büroklammern </option>
                                                                      <option>Büroklammern Kreuz</option>
                                                                      <option>Farbrollen für Rechenmaschine</option>
                                                                      <option>Gummiband, schmal</option>
                                                                      <option>Gummiband, mittel</option>
                                                                      <option>Gummiband, breit</option>
                                                                      <option>Gummifinger</option>
                                                                      <option>Herma SuperPrint Etiketten, 4610</option>
                                                                      <option>Herma SuperPrint Etiketten, 4677</option>
                                                                      <option>Locher Leitz, blau</option>
                                                                      <option>Magnetköpfe, 20mm rot</option>
                                                                      <option>Massstab, 30 cm</option>
                                                                      <option>Post it Index 25,4mm x 38,0mm</option>
                                                                      <option>Post it, 38 x 51</option>
                                                                      <option>Post it, 76 x 76</option>
                                                                      <option>Pritt Korrektur Ersatzroller</option>
                                                                      <option>Pritt Korrektur Roller</option>
                                                                      <option>Pritt-Klebe-Stift</option>
                                                                      <option>Radiergummi</option>
                                                                      <option>Retour-Etiketten für Einschreiben (Abteilung?)</option>
                                                                      <option>Scheren 17 cm</option>
                                                                      <option>Scotch Abroller, B8</option>
                                                                      <option>Scotch Transparent Tape, 19 mm</option>
                                                                      <option>Stempel Datum (Trodat Nr.?)</option>
                                                                      <option>Stempelkissen schwarz zu Trodat Nr.?</option>
                                                                      <option>SVA Etiketten für Pakete (mit Barcode)</option>
                                                                      <option>SVA-Etiketten für Einschreibe-Pakete</option>
                                                                      <option>Post it Index 12,0mm x 43,0mm</option>
                                                                  </select>

                                                                  <button class="btn btn-danger" ng-show="$last" ng-click="removeChoice()">-</button>
                                                              </fieldset>

                                                              <div class="br10px">
                                                                  <button class="btn btn-success" ng-click="addNewChoice()">Feld hinzufügen</button>
                                                              </div>

                                                          </div>

                                                      </div>

                                                  </div>

                                              </div>

                                              <!-- Ende Hilfsmittel -->
                                              <!-- Start Organisation -->

                                              <div ng-controller="MainCtrl">

                                                  <div class="row" style="max-width:95%">

                                                      <div class="panel panel-default">
                                                          <div class="panel-body">
                                                              <p class="catTitle">Organisation</p>
                                                              <fieldset data-ng-repeat="choice in choices">

                                                                  <input type="text" class="form-control" style="max-width:80px;" ng-model="choice.value" name="" value="" placeholder="Anzahl">

                                                                  <select class="form-control" style="min-width:300px">
                                                                      <option selected>Bitte Artikel auswählen</option>
                                                                      <option>Bundesordner Biella, 4cm</option>
                                                                      <option>Bundesordner Biella, 7cm</option>
                                                                      <option>Bundesordner Rücken, 4cm</option>
                                                                      <option>Bundesordner Rücken, 7cm</option>
                                                                      <option>Einlagemappen Biella, 252418 </option>
                                                                      <option>Heftstreifen zum Binden</option>
                                                                      <option>Mappen, G-Finder, blau</option>
                                                                      <option>Mappen, G-Finder, gelb</option>
                                                                      <option>Mappen, G-Finder, grün</option>
                                                                      <option>Mappen, G-Finder, rot </option>
                                                                      <option>Mappen, G-Finder, weiss</option>
                                                                      <option>Register 1 - 10, Plastik</option>
                                                                      <option>Register 1 - 12, Plastik</option>
                                                                      <option>Register 1 - 20, Plastik</option>
                                                                      <option>Register 1 - 31, Plastik</option>
                                                                      <option>Register A - Z, Plastik</option>
                                                                      <option>Register Jan. - Dez., Plastik</option>
                                                                      <option>Register Dez. - Jan., Plastik</option>
                                                                      <option>Register Karton 12-teilig farbig</option>
                                                                      <option>Schnellhefter, blau</option>
                                                                      <option>Schnellhefter, grün</option>
                                                                      <option>Schnellhefter, rot</option>
                                                                      <option>Sichtmappen A4 Plastic, blau</option>
                                                                      <option>Sichtmappen A4 Plastic, gelb</option>
                                                                      <option>Sichtmappen A4 Plastic, grün</option>
                                                                      <option>Sichtmappen A4 Plastic, rot</option>
                                                                      <option>Sichtmappen A4 Plastic, transparent</option>
                                                                      <option>Tischablagekisten, grau</option>
                                                                      <option>Vetro-Mobil, Etiketten</option>
                                                                      <option>Vetro-Mobil, Hängemappen</option>
                                                                      <option>Vetro-Mobil, Klarsichthülsen  (Farben?)</option>
                                                                      <option>Vetro-Mobil, Reiter</option>
                                                                      <option>Zeigebuchtaschen</option>
                                                                  </select>

                                                                  <button class="btn btn-danger" ng-show="$last" ng-click="removeChoice()">-</button>
                                                              </fieldset>

                                                              <div class="br10px">
                                                                  <button class="btn btn-success" ng-click="addNewChoice()">Feld hinzufügen</button>
                                                              </div>

                                                          </div>

                                                      </div>

                                                  </div>

                                              </div>

                                              <!-- Ende Organisation -->
                                              <!-- Start Folien-->

                                              <div ng-controller="MainCtrl">

                                                  <div class="row" style="max-width:95%">

                                                      <div class="panel panel-default">
                                                          <div class="panel-body">
                                                              <p class="catTitle">Folien</p>
                                                              <fieldset data-ng-repeat="choice in choices">

                                                                  <input type="text" class="form-control" style="max-width:80px;" ng-model="choice.value" name="" value="" placeholder="Anzahl">

                                                                  <select class="form-control" style="min-width:300px">
                                                                      <option selected>Bitte Artikel auswählen</option>
                                                                      <option>Präsentationsfolie Schwarz-/ Weissdruck, CG3300</option>
                                                                      <option>Präsentationsfolie Farbdruck, CG3700</option>
                                                                  </select>

                                                                  <button class="btn btn-danger" ng-show="$last" ng-click="removeChoice()">-</button>
                                                              </fieldset>

                                                              <div class="br10px">
                                                                  <button class="btn btn-success" ng-click="addNewChoice()">Feld hinzufügen</button>
                                                              </div>

                                                          </div>

                                                      </div>

                                                  </div>

                                              </div>

                                              <!-- Ende Folien -->

                                          </td>

                                          <td valign="top" width="33%">

                                              <!-- Start Schreibutensilien -->

                                              <div ng-controller="MainCtrl">

                                                  <div class="row" style="max-width:95%">

                                                      <div class="panel panel-default">
                                                          <div class="panel-body">
                                                              <p class="catTitle">Schreibutensilien</p>
                                                              <fieldset data-ng-repeat="choice in choices">

                                                                  <input type="text" class="form-control" style="max-width:80px;" ng-model="choice.value" name="" value="" placeholder="Anzahl">

                                                                  <select class="form-control" style="min-width:300px">
                                                                      <option selected>Bitte Artikel auswählen</option>
                                                                      <option>Bleistift (Paket)</option>
                                                                      <option>Bleistift (Stück)</option>
                                                                      <option>Edding 3000, blau (Paket)</option>
                                                                      <option>Edding 3000, blau (Stück)</option>
                                                                      <option>Edding 3000, grün (Paket)</option>
                                                                      <option>Edding 3000, grün (Stück)</option>
                                                                      <option>Edding 3000, rot (Paket)</option>
                                                                      <option>Edding 3000, rot (Stück)</option>
                                                                      <option>Edding 3000, schwarz (Paket)</option>
                                                                      <option>Edding 3000, schwarz (Stück)</option>
                                                                      <option>Fineliner, blau (Paket)</option>
                                                                      <option>Fineliner, blau (Stück)</option>
                                                                      <option>Fineliner, grün (Paket)</option>
                                                                      <option>Fineliner, grün (Stück)</option>
                                                                      <option>Fineliner, rot (Paket)</option>
                                                                      <option>Fineliner, rot (Stück)</option>
                                                                      <option>Fineliner, schwarz (Paket)</option>
                                                                      <option>Fineliner, schwarz (Stück)</option>
                                                                      <option>Kugelschreiber, blau (Paket)</option>
                                                                      <option>Kugelschreiber, blau (Stück)</option>
                                                                      <option>Kugelschreiber, grün (Paket)</option>
                                                                      <option>Kugelschreiber, grün (Stück)</option>
                                                                      <option>Kugelschreiber, rot (Paket) </option>
                                                                      <option>Kugelschreiber, rot (Stück)</option>
                                                                      <option>Kugelschreiber, schwarz (Paket)</option>
                                                                      <option>Kugelschreiber, schwarz (Stück)</option>
                                                                      <option>Stabiloboss, blau (Paket)</option>
                                                                      <option>Stabiloboss, blau (Stück)</option>
                                                                      <option>Stabiloboss, gelb (Paket)</option>
                                                                      <option>Stabiloboss, gelb (Stück)</option>
                                                                      <option>Stabiloboss, grün (Paket)</option>
                                                                      <option>Stabiloboss, grün (Stück)</option>
                                                                      <option>Stabiloboss, orange (Paket)</option>
                                                                      <option>Stabiloboss, orange (Stück)</option>
                                                                      <option>Stabiloboss, rot (Paket)</option>
                                                                      <option>Stabiloboss, rot (Stück)</option>
                                                                  </select>

                                                                  <button class="btn btn-danger" ng-show="$last" ng-click="removeChoice()">-</button>
                                                              </fieldset>

                                                              <div class="br10px">
                                                                  <button class="btn btn-success" ng-click="addNewChoice()">Feld hinzufügen</button>
                                                              </div>

                                                          </div>

                                                      </div>

                                                  </div>

                                              </div>

                                              <!-- Ende Schreibuntensilien -->
                                              <!-- Start Papier und Kuverts -->

                                              <div ng-controller="MainCtrl">

                                                  <div class="row" style="max-width:95%">

                                                      <div class="panel panel-default">
                                                          <div class="panel-body">
                                                              <p class="catTitle">Papier und Kuverts</p>
                                                              <fieldset data-ng-repeat="choice in choices">

                                                                  <input type="text" class="form-control" style="max-width:80px;" ng-model="choice.value" name="" value="" placeholder="Anzahl">

                                                                  <select class="form-control" style="min-width:300px">
                                                                      <option selected>Bitte Artikel auswählen</option>
                                                                      <option>Block, A4, 4mm</option>
                                                                      <option>Block, A5, 4mm</option>
                                                                      <option>Block, A6, Sudel</option>
                                                                      <option>Block, Telefon-Notiz</option>
                                                                      <option>Dossier Einlagen, blau</option>
                                                                      <option>Dossier Einlagen, gelb</option>
                                                                      <option>Dossier Einlagen, grün</option>
                                                                      <option>Dossier Einlagen, rosa</option>
                                                                      <option>Kuvert, B4 mit Falt, ohne Fenster </option>
                                                                      <option>Kuvert, B4 ohne Falt, ohne Fenster </option>
                                                                      <option>Kuvert, B5, mit Falt, ohne Fenster,</option>
                                                                      <option>Verpackungsschachteln 325 x 250        </option>
                                                                      <option>Verpackungsschachteln 455 x 320</option>
                                                                  </select>

                                                                  <button class="btn btn-danger" ng-show="$last" ng-click="removeChoice()">-</button>
                                                              </fieldset>

                                                              <div class="br10px">
                                                                  <button class="btn btn-success" ng-click="addNewChoice()">Feld hinzufügen</button>
                                                              </div>

                                                          </div>

                                                      </div>

                                                  </div>

                                              </div>

                                              <!-- Ende  Papier und Kuverts -->

                                          </td>

                                          <td valign="top" width="28%">

                                              <!-- Start Spezial-Bestellungen -->
                                              <div class="row" style="max-width:95%">
                                                  <div class="panel panel-default">
                                                      <div class="panel-body">
                                                          <fieldset>
                                                              <p class="catTitle">Spezial-Bestellungen</p>
                                                              <ul>
                                                                  <li>Muster oder Vögtli-Bestellnummer beilegen</li>
                                                                  <li>Stempelanfertigung: Fabrikat und Druckmuster beilegen</li>
                                                                  <li>(Spezialbestellungen erfordern das Visum des Bereichsleiters) </li>
                                                              </ul>
                                                              <textarea id="Spezial Bestellungen" rows="8" cols="50"></textarea>
                                                          </fieldset>
                                                      </div>
                                                  </div>

                                              </div>
                                              <!-- Ende Spezial-Bestellungen -->

                                              <!-- Start Formulare und Merkblätter -->
                                              <div class="row" style="max-width:95%">
                                                  <div class="panel panel-default">
                                                      <div class="panel-body">
                                                          <fieldset>
                                                              <p class="catTitle">Formulare und Merkblätter</p>
                                                              <ul>
                                                                  <li>Bitte die enstprechende Nr. aufführen</li>
                                                              </ul>
                                                              <textarea id="FomulareUndMerkblaetter" rows="8" cols="50"></textarea>
                                                          </fieldset>
                                                      </div>
                                                  </div>

                                              </div>
                                              <!-- Ende Formulare und Merkblätter -->

                                              <p class="spacerF">  </p>

                                             <button class="btn btn-danger" type="reset" onclick="myFunction()">Alle Eingaben löschen</button>
                                             <button class="btn btn-success" type="submit">Bestellung absenden</button>

                                          </td>

                                      </tr>
                                  </table>
                              </form>
                          </div>
                      </body>
                      </html>

                    • Re: Order Form in html widget should create a jive document with the form content
                      noelwhite

                      Hi Simon,

                      I have a Jive Form Widget that lets you drag and drop form elements to build entry forms that go on Overview pages.  Form submissions use the standard Jive API to create Jive documents in a tabular format with the submitted information.  There is also a Form Report widget that will tally the results of all the submissions (keyed by the use of a particular Tag) and generate a report with the results, as well as allowing you to export the data to Excel or similar.  You can read more about these widgets in my post here: UX Widgets

                       

                      I hope that helps.