Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Issue setting initial values of oj-select-single inside a oj-list-view

Sirish ReddySep 15 2021

I have an <oj-checkboxset> and an <oj-select-single> menu inside an <oj-list-view> component. <oj-list-view> component is placed inside an <oj-dialog>... The list data displays fine, but my oj-select-single value is not getting set. oj-checkboxset value is getting set and the values reflects fine, but oj-select-single doesn't reflect on screen.
--------------my oj-dialog------------------
<oj-dialog style="display:none;" class="ss-coauthor-dialog" id="coauth_dialog" dialog-title="Add coauthors">
<oj-defer>
<div slot="body">
<div slot="assembly"
id="assembly-tab-panel"
role="tabpanel"
aria-labelledby="assembly-tab">
<div class="demo-tab-content">
<h2></h2>
<oj-list-view id="assemblyListview" data="[[assemblyCoAuthors]]" drill-mode="none" selection-mode="none"
selection="{{asmCoAuthSelected}}">
<template slot="itemTemplate">
<div class="oj-flex" style="flex-wrap: nowrap">
<div class="oj-flex-item oj-md-1">
<oj-checkboxset value='[[asmHandleCheckbox($current.data.value)]]'
on-value-changed='[[asmCoAuthListener]]'
class='oj-checkboxset-no-chrome oj-clickthrough-disabled'
:id="[['assemblyListviewSet' + $current.data.value]]"
:data-row-id="{{$current.data.value}}">
<oj-option value="checked" :id="[['assemblyListview' + $current.data.value]]">
</oj-option>
</oj-checkboxset>
</div>
<div class="oj-flex-item">
<div>
<strong>
<oj-bind-text value="[[$current.data.label]]"></oj-bind-text>
</strong>
</div>
</div>
<div class="oj-flex-item oj-md-6">
<oj-select-single data='[[asmAuthorsDataProvider]]'
value='[[asmAuthorTypeHandle($current.data.value)]]'
label-hint='Select Author Type'
label-edge='none'
placeholder='place holder'
on-value-changed='[[asmAuthorTypeListener]]'
disabled='[[asmAuthorTypeDisable($current.data.value)]]'
:id="[['authorSelect' + $current.data.value]]"
:data-row-id="{{$current.data.value}}">
</oj-select-single>
</div>
</div>
</template>
</oj-list-view>
</div>
</div>
</div>
<div slot="footer">
<oj-button id="addCoAuthButton" on-oj-action="[[addCoAuthor]]">ADD</oj-button>
</div>
</oj-defer>
</oj-dialog>
----- My js methods-------
self.asmAuthorType = [
{value: "RC", label: "Regular Coauthor"},
{value: "PC", label: "Principal Coauthor"},
{value: "JA", label: "Joint Author"},
];
self.asmAuthorsDataProvider = new oj.ArrayDataProvider(self.asmAuthorType, {
keyAttributes: "value",
});
PROBLEM AREA:
When values are matching, the below method returns me the correct value, but on oj-select-single it always displays Regular Coauthor even though the values are PC or JA.
self.asmAuthorTypeHandle = function (id) {
// If an entry is found it will return the value
self.asmAuthorTypeSelected().forEach(function (thisAuthorTypeObj) {
if (thisAuthorTypeObj.id === id) {
console.log('thisAuthorTypeObj.id::'+thisAuthorTypeObj.id);
console.log('id::'+id);
console.log('value::'+thisAuthorTypeObj.value);
return thisAuthorTypeObj.value;
}
});
// If no entry found, then return the default value
return "RC";
};
The below checkbox value reflects fine on screen
self.asmHandleCheckbox = function (id) {
return self.asmCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];
};

Can someone please help me with identifying the issue. I highly appreciate it.

Thanks.

This post has been answered by John JB Brock-Oracle on Sep 16 2021
Jump to Answer

Comments

John JB Brock-Oracle

I setup a local repro case as best I could, using strings for most of the function returns, and it works fine. My guess is that the asmAuthorTypeHandle method is not actually returning a string all of the time.
If you comment out all of the conditional code in that method, and just let it always return "RC", do you see it working?
What version of JET are you working with?

Sirish Reddy

Thanks for the response John! The handling always assumes the default value while rendering. I see the below message in console... The value is what I am returning from self.asmAuthorTypeHandle. Still it assumes default value RC for both AD04 and AD31 and the oj-select-single displays Regular Coauthor.
-----console message-------
thisAuthorTypeObj.id::AD04
id::AD04
value::PC
thisAuthorTypeObj.id::AD31
id::AD31
value::JA
---------------
My application is running on
Oracle JET Command Line Interface, version: 9.0.0, built on Alta (Web) theme.
Thanks.

John JB Brock-Oracle
Answer

Two things are going on in your forEach loop.

  1. You are testing for a comparison of "id" against the wrong value. You should be testing against "thisAuthorTypeObj.value"
  2. Your return out of the forEach is not going to return you out of the full if statement. The return "RC" command is always going to get run last, and so you will always see RC as the default. Change your method to look like this.
  asmAuthorTypeHandle = (id) => {
    let temp = "RC";
    // If an entry is found it will return the value
    this.asmAuthorTypeSelected.forEach(function (thisAuthorTypeObj) {
      if (thisAuthorTypeObj.value === id) {
        console.log('thisAuthorTypeObj.id::' + thisAuthorTypeObj.id);
        console.log('id::' + id);
        console.log('value::' + thisAuthorTypeObj.value);
        temp = thisAuthorTypeObj.value;
      }
    });
    // If no entry found, then return the default value
    return temp;
  };

This will return the proper value from the object items that your are doing the forEach against.

Marked as Answer by Sirish Reddy · Sep 16 2021
Sirish Reddy

Thanks John! Changing the return handling worked!
Being a primary Java developer, I did not realize that the for loop continues to execute after return statement.
Thanks again.

1 - 4

Post Details

Added on Sep 15 2021
4 comments
654 views