custom parameter editor issue

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Ross Ekberg 124 posts 365 karma points

May 05, 2022 @ 19:13
0

Custom Parameter Editor Issue
I have a custom parameter editor that consists of a dropdown that is populated from a Json collection:

[ {"SubID":1,"Title":"Agenda"}, {"SubID":2,"Title":"Handbook"}, {"SubID":3,"Title":"Members"}, {"SubID":4,"Title":"Vacancies"}, {"SubID":6,"Title":"eachers"} ]

In my controller, I have this line. :
```
$scope.subscriptions = <Json data from above>;
```
I populate a dropdown with the Json in the following view. Note the ng-options:
```
<select ng-model="model.value" ng-options="sub.SubID as sub.Title for sub in subscriptions">
    <option value="">-- choose subscription --</option>
</select>
```
The dropdown populates with the title being displayed, but the values are sequential and not the true SubIDs. For example, the first item in the Json has a SubID of "1", but the value in the dropdown is "0". However, when selected, the correct SubID is injected into the macro. Here is the HTML:
```
<?UMBRACO_MACRO macroAlias="WebSubscriptionsQuickSignup" SubID="1" />
```
Unfortunately, when I re-open the macro parameters, the dropdown box resets.

If I change the ng-options to the following:
```
<select ng-model="model.value" ng-options="sub.Title for sub in subscriptions track by sub.SubID">
    <option value="">-- choose subscription --</option>
</select>
```
when I select an option, confirm it, and re-open the macro parameters, the dropdown retains the selection as it should, and the dropdown values correspond to the SubID. However, now, the entire Json object is being injected into the macro, as seen in the HTML:
```
<?UMBRACO_MACRO macroAlias="WebSubscriptionsQuickSignup" SubID="{&quot;SubID&quot;:2,&quot;Title&quot;:&quot;Handbook&quot;}" />
```
What I need here is for the dropdown to retain the value AND only the SubID to be injected into the HTML. What am I doing wrong?
Copy Link
Mark Drake 134 posts 458 karma points c-trib

May 05, 2022 @ 22:18
0
Are you trying to capture the title only? Try using this for your ng-options attribute:
```
sub.Title as sub.Title 
for sub in subscriptions 
track by sub.SubID
```
Here's a CodePen.

I don't find the vernacular for ng-options to be that friendly. You'll receive a better explanation for this behavior if you read the documentation.
Copy Link
Ross Ekberg 124 posts 365 karma points

May 05, 2022 @ 23:00
0
Thank you for the reply. Actually, I am trying to capture the SubID. I have already tried this code:
```
sub.SubID as sub.Title 
for sub in subscriptions
track by sub.SubID
```
It didn't have any effect.

Again, when I use
```
sub.SubID as sub.Title 
for sub in subscriptions
```
The SubID only is saved in the model and injected into the macro correctly, but the dropdown values aren't those of the SubID and the dropdown resets when reloaded.

However, when I use
```
sub.Title for sub in subscriptions
track by sub.SubID
```
The dropdown values are set to the SubID values the dropdown retains it's selection when reloaded, but the entire Json object is saved in the Umbraco model and is injected into the macro, which breaks it.

I need it to do both: save only the SubID in the model and inject only the SubID into the macro, and retain the dropdown selection when reloaded (I don't care if the dropdown values are correct so long as it works as needed. But I suspect this has something to do with my problem.)
Copy Link
Mark Drake 134 posts 458 karma points c-trib

May 05, 2022 @ 23:52
0
Sorry for misreading your original request!

That's very odd indeed. The first example you provided works in my CodePen. This is my new ng-options attribute value:
```
sub.SubID as sub.Title 
for sub in subscriptions 
track by sub.SubID
```
I'll try to test this inside of Umbraco next. I'm sorry I wasn't able to help more!
Copy Link
Ross Ekberg 124 posts 365 karma points

May 06, 2022 @ 13:15

0

No worries. Thank you for any help you can give. This one has been driving me bonkers! I am considering coding around it.

In my manifest file, I have tried changing the 'valuetype' for the editor, and it doesn't seem to change anything.

Copy Link
Ross Ekberg 124 posts 365 karma points

May 06, 2022 @ 17:52
101
I was able to find a solution/work around.

Here is my updated view:
```
<select ng-model="chosenSub" ng-change="newSub()" ng-options="sub.Title for sub in subscriptions track by sub.SubID">
            <option value="">-- choose subscription --</option>
</select>
```
As you can see, I have it tracking by the SubID, I set the model to custom parameter 'chosenSub', and I added an 'ng-change' function call.

Here is my controller:
```
    if ($scope.model.value != null) {
        angular.forEach($scope.subscriptions, function (value, key) {
            if ($scope.model.value == value.SubID) {
                $scope.chosenSub = value;
            }
        });
    }

    $scope.newSub = function () {
        $scope.model.value = $scope.chosenSub.SubID;
    };
```
So basically, I check if the model has a value. If it does, I iterate through the Json collection to find a match on the SubID. Once found, I set the custom paramter 'chosenSub' equal to the Json object. This allows the dropdown to retain the selection on reload. And then, the onchange function sets the model value to the SubID of the chosen item in the dropdown. This allows just the SubID to be injected into the macro.

I don't know if this is the best way to do this, but I can't find any other way.
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?