ritaaudi
Tera Contributor

Hi Kate: How can I embed the cloned 'sp-variable-editor' widget into the form widget or a clone of the form widget? Do you know? Thanks so much!


Hi: I went ahead and cloned the form widget and was hoping you can advise me to how to embed the   'sp-variable-editor' widget in it. Any idea? Thank you so much!


Hi Rita,
Firstly, sorry for the delay - I wasn't online yesterday.
So let's get into it!
1. You might also want to remove the 'Save' button from it - you can do this by simply commenting out the line in HTML with element <button>, or the whole footer div
2. Important remark is, that we will not be able to embed the widget at exactly the same place as the original variables were. It's because the whole form is being generated dynamically from the script. What we can do, is to place it at the very beginning, or very end - before the buttons.
So if we want to put it in the beginning, open your cloned form widget in editor and in HTML go somewhere about line 62, where you see <!-- form -->
right before it place these lines:


        <!-- Embedded variables -->


          <sp-widget widget="data.embedVariables"></sp-widget>


Screen Shot 2017-06-16 at 8.52.09 AM.png



If you want the variables after the form, place the lines right before the <!-- UI Action Links -->


3. Go to server script part and somewhere where the data objects are assigned, place this line


        data.embedVariables = $sp.getWidget('your_cloned_variables_widget');


Screen Shot 2017-06-16 at 8.52.36 AM.png


And this should work. Again, if you're using this page for more than just sc_req_item, you need to embed a condition so your variables are called only for the tables that can have variables. It could look like this:
HTML:



<!-- Embedded variables -->


          <div ng-if="data.hasVariables">


              <sp-widget widget="data.embedVariables"></sp-widget>


          </div>



Server Script: (almost at the end - maybe right before the line // Activity formatter is hardcoded to set specific options)


if (data.table == 'sc_req_item') {


  data.hasVariables = true;


        }



Hope this helps!


View solution in original post

ritaaudi
Tera Contributor

Kate, thank you so much for the thorough explanation. Really appreciate it! P.S. How would you suggest I learn more about angular scripting? Is there a video or book that you would recommend? Best regards, Rita


Hi Rita,



Happy it helped Regarding AngularJS, I think I took the one at Codecademy - Learn AngularJS 1.X | Course | Codecademy . Although if you don't have deep knowledge in web development, it might bit little bit confusing. A great way how to get decent fundamentals in web is a free course on Coursera (after I finished the course I wished I had done it prior working with Service Portal) - https://www.coursera.org/learn/html-css-javascript-for-web-developers .I found it super helpful. It not only explains the coding, but gives lots of insights into other practical topics too. I truly can't express how much this course helped me


And then the same professor has another course - related to AngularJS - Single Page Web Applications with AngularJS | Coursera . Haven't taken this one, but I bet the quality is awesome, based on the teacher.



Have a great day.