Settings Widget works, but I have no idea how. $scope.settings.params

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I am new to Rise Vision and its API's.  I have started writing a simple registration form widget and the settings page is 98% complete.  

I scoured over the widget-settings-ui-core.js for hours.  I worked Google over time researching AngularJS.  Finally, I have mixed and meshed some code together to get thing read and writing.  Currently, I can load default data into a new widget, manipulate that data (Angular Baby!!!), write it back to the HTML, and retrieve it again from the HTML.  I have no idea how this is happening.  I understand the concept but for the life of me cannot deconstruct the code.  Would someone please explain to me how the following snippet is working?!?!?

Well I couldn't figure out how to embed my code snippet so I attached an image.



90% of the widget is custom element directives that render a preview form on the fly.  From there you can add/edit/remove fields.  When you are happy with you form, you save it.  The additionalParams or default settings is loaded into "$scope.fields".  This is happening somehow in the code snippet in the attached image.  I have no clue if I did this right, wrong, or stumbled upon the more efficient process.  All I know is without this code, it won't work.

Thanks in advance for any help that you can offer.

Joshua

PS: The custom directives will allow me to reuse the same modules to render the form on the widget page.  No need to rewrite what I have already written, right? :)
Photo of Joshua M. O'Mary, Sr.

Joshua M. O'Mary, Sr.

  • 150 Points 100 badge 2x thumb
  • happy

Posted 4 years ago

  • 1
Photo of Data Call Support

Data Call Support

  • 130 Points 100 badge 2x thumb
Greetings,
This works like a container that will hold your parameters such as your settings params like field1=value1&field2=value2&field3=value3...

Uncomment the console and pay around with the code you will eventually figure it out.
Thanks. I think that I should have been a little more descripted. I wrote the event listener after digging through the widget.setings.ui.core.js and found the $broadcast of additionalParams (line 27 of widget.settings.ui.core.js). The loop loads the data describing each field for the widget to use. I added the commented console.log so I could remember the structure of its data.


The event listener won't fire without line 13 ($scope.settings.params). I don't understand why the listener won't fire without it. Like you said, it's a just container with all the parameters. I don't use is any where else.


I also can't figure out how the default settings are handled. Are they apart of the $scope object? Without knowing how to access them I can't find a way to reset the default form.


Thanks again,


Joshua
(Edited)
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hi Joshua,

You shouldn't need to listen for the loadAdditionalParams event at all if you're using the settingsController in your Widget.

I'm assuming that you're bringing in widget-settings-ui-core via Bower? If so, then you can do something like this (example taken from the Calendar Widget):
<body ng-app="risevision.widget.googleCalendar.settings" ng-controller="settingsController">
When the code for settingsController runs, it will automatically call loadAdditionalParams to load your saved settings.

You may want to look over the ReadMe for that repo, as there are more details in there. You can also refer to a Widget like the Calendar Widget to see how it's implemented.

Thx.
First, thank you for pointing me in the right direction. I really enjoy learning how things work. Hopefully you can point me in the right direction again. So after I followed your advice, I think I have grasped the concept of reading from params/additionalParams. My settings widget is loading defaultsSettings if there are no others and saving changes back the HTML in the editor. In other words, every thing is working just fine. However, I am still unclear on a few items. The following is the second block in my element directive's controller.

$scope.$watch("settings.additionalParams.fields", function(formFields) {
if (formFields !== undefined) {
$scope.fields = formFields;
}
});

How does "widget.settings.ui.core.js" know to get "$scope.fields" when collecting additional parameters? No where in my code do I take the changes performed to "$scope.fields" and copy them back to "$scope.settings.additionalParams.fields".

$scope.defaultSettings = angular.copy(defaultSettings.additionalParams.fields);

$scope.resetDefaultSettings = function() {
$scope.settings.additionalParams.fields = $scope.defaultSettings;
}

When "$scope.resetDefaultSettings()" is invoked my $watch gets fired again and everything is reset. This is the exact behavior I was expecting and hoping for. What I don't understand is why I have to copy my default settings? The angular.copy line is the first line in my element directive's controller. It seems that I lose my defaultSettings If I do not do this. Example test function below.

$scope.resetDefaultSettings = function() {
console.log($scope.fields);
console.log(defaultSettings.additionalParams.fields);
console.log($scope.settings.additionalParams.fields);
}

I used this for testing when I was not achieving the desired form reset. I invoked this function when there were no initial additionalParams, then after I had made changes to $scope.fields. All three consoles.logs are exactly the same. It appears that every change I make to "$scope.fields" was also made to "$scope.settings.additionalParams.fields" which is also made to "defaultSettings.additionalParams.fields". First, why would you want to overwrite your defaultSettings. They are no longer default at that time. Why isn't my "$scope.$watch" being fired every time there is a change made to "$scope.fields". Some how it is modifying "$scope.settings.additionalParams.fields".

Thank you again for all the insight. I am really enjoying this platform.

Joshua
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
In your settings.html page, you should set an ng-model attribute on every field that needs to be saved. For example,
<input id="show-date" type="checkbox" ng-model="settings.additionalParams.showDate">Show Date
This is what connects your settings to widget-settings-ui-core.js. You should not need to add a watcher in order to save your settings.

Beyond that, it's a bit difficult to give answers to your questions without understanding the context of your Widget. In the simplest case though, the only code that you should need in your controller is the code that assigns the default settings. You likely don't need anything else like watchers unless you want to attach a new variable to $scope in order to make it accessible to the UI. We typically use watchers for showing / hiding parts of the UI based on some condition.
I'm such a doof.  You are 100% correct.  There is no need for the $watch at all.  I removed the $scope.fields from my .js and added the settings.additionalParams.fields.more.properties to each of the required HTML elements.  Jr developer moment....lol.  

Last issue is the default settings.  I would think that the .value("defaultSettings"...) would remain constant, but it appears they are being modified as $scope.settings is modified.  My widget is a contact form that can be customized.  I have a button that resets the form back to its original state.  Well, after settings are done loading or any modifications are made .value("defaultSettings"...) is no longer default.  Did I implement this correctly by setting...

$scope.originalSettings = angular.copy(defaultSettings);//1st line of code

....then set $scope.settings = $scope.originalSettings; when the reset button function is fired?  If not, then can you point me in the right direction of the proper way to do this?

Thank you again for your help.  I know dealing with nood issues can be frustrating.

Joshua
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hi Joshua,

We've never had a need to reset the settings to defaults, so I've never tested whether or not those defaults get altered. The method you're using to copy the defaults looks OK to me, but since your question is more Angular-specific, you may find better answers over on StackOverflow.

Thx.