Hi @Swagatika Rout,

I recommend reviewing the ASSETMOBILE application, as it contains multiple examples of toggle component usage.

For instance, on the Edit Asset page (id: editasset, controller: AssetEditDataController), there is a section called Linear Asset or Calibration which includes two toggles. I suggest reviewing the Calibration? toggle as a reference example.

<box direction="row" horizontal-align="center" vertical-align="center" padding-start="0" padding="1.5" fill-parent-horizontal="true" id="pbm7z">                <toggle label="Linear asset?" toggled="{dsEditAsset.item.islinear}" left-align-label="true" readonly="{page.state.isCalibration}" hidden="{!page.state.linearLicense}" on-toggle="handleLinearToggleEdit" id="n3nmw"/>                <toggle label="Calibration?" toggled="{dsEditAsset.item.iscalibration}" left-align-label="true" readonly="{page.state.isLinear}" on-toggle="handleCalibrationToggle" id="zzvag"/></box>

handleCalibrationToggle() {    let dsEditAsset = this.app.findDatasource("dsEditAsset");    this.page.state.isCalibration = !this.page.state.isCalibration;    dsEditAsset.item.iscalibration = this.page.state.isCalibration;    (...) }

File src/AssetEditDataController Method: updateAsset

/**   * Function to update asset.   */  async updateAsset(evt) {    let asset = evt.item;    this.page.state.saveInProgress = true;    const device = Device.get();    // istanbul ignore else    if (asset) {      let assetEditResource = this.app.findDatasource("dsEditAsset");      assetEditResource.currentItem.siteid = this.app.client.userInfo.insertSite;      assetEditResource.currentItem.islinear = this.page.state.isLinear;      assetEditResource.currentItem.iscalibration = this.page.state.isCalibration;      if(!this.page.state.isConditionCodeEnable) {        assetEditResource.updateRequired('conditioncode', false, assetEditResource.item, false);      }      try {        /* istanbul ignore else */        if (!assetEditResource.currentItem.islinear) {          // clear linear fields          assetEditResource.currentItem.direction = "";          assetEditResource.currentItem.lrm = "";          assetEditResource.currentItem.startmeasure = "";          assetEditResource.currentItem.endmeasure = "";          assetEditResource.currentItem.startdescription = "";          assetEditResource.currentItem.enddescription = "";          this.clearWarnings("lrm");          this.clearWarnings("startmeasure");          this.clearWarnings("endmeasure");        }        // istanbul ignore else        if (this.callDefaultSave) {          this.page.state.useConfirmDialog = false;        }        let response;        this.saveDataSuccessful = true;        assetEditResource.on("save-data-failed", this.onSaveDataFailed);        if (this.checkAssetMoveAllowed(assetEditResource.currentItem)) {          let moveResponse = await this.moveAsset(assetEditResource.currentItem);          // istanbul ignore next          if (moveResponse) {            this.displayWarningPopup(moveResponse);          }        }        if (this.page.state.classificationChanged) {          await this.updateSpecification(assetEditResource.currentItem);          this.page.state.classificationChanged = false;          this.clearTempEditDS();        }        /* istanbul ignore else */        if (!this.page.state.parentUpdatedFailed) {          let interactive = { interactive: !this.page.state.isMobile };          response = await assetEditResource.save(interactive);          this.page.state.saveInProgress = false;          /* istanbul ignore next */          if (response && assetEditResource.currentItem) {            let assetnum = assetEditResource.currentItem.assetnum;            let itemhref = assetEditResource.currentItem.href;            if (device.isMaximoMobile) {              this.app.pageStack.pop();              this.app.setCurrentPage({                name: "assetDetails",                resetScroll: true,                params: { assetnum: assetnum, href: itemhref },              });            } else {              /* istanbul ignore next */              if (response.items && response.items.length > 0) {                this.app.pageStack.pop();                if (response.items[0].href) {                  this.app.setCurrentPage({                    name: "assetDetails",                    resetScroll: true,                    params: {                      assetnum: assetnum,                      href: response.items[0].href                    },                  });                }              }            }          }        }      } catch (error) {        /* istanbul ignore next */        log.t(TAG, error);      } finally {        this.page.state.saveInProgress = false;        /* istanbul ignore else */        if (this.callDefaultSave) {          this.page.state.useConfirmDialog = true;        }        assetEditResource.off("save-data-failed", this.onSaveDataFailed);      }    }  }

To better understand why the update is not working, I suggest raising an IBM Case requesting IBM to share the Android debug build of the MAS Mobile application. This would allow you to connect to your environment and use Chrome DevTools to inspect the console and network logs.

The root cause may be related to the HREF value - since your datasource definition depends on woDetailResource, the object you are trying to update sits at the "second level" of the data hierarchy.

Hi @Bartosz Marchewka, 

Thank you for the detailed explanation and reference to ASSETMOBILE - that was helpful.
I wanted to clarify a bit more about my use case and current behavior:
- The toggle itself is working as expected when used inside standard sections (similar to the Linear / Calibration example you shared). The state updates correctly and the value is saved without issues there.
- I'm also able to update the same value from a role-based application - the toggle works via click+drag in that context as well.

However, my requirement is slightly different:
I need to place the toggle inside a side sliding drawer and within a <data-list>, because:
There can be multiple technicians added in the Assignment list.
Each technician row needs its own toggle-driven attribute update.

Issue Observed
In the MAS Mobile application, when the toggle is placed inside a <data-list> (row-level) or sliding drawer, the click / drag interaction does not respond.
The same UI definition behaves correctly (using click + drag) in the role-based (web) application, which makes this appear mobile-specific.

This leads me to a few questions:
Is this a known or expected behavior of <toggle> components when used inside a <data-list> on MAS Mobile?
Are there any shipped examples where:
A toggle is used inside a data-list row, or toggle is used inside a sliding drawer?
If this is a known limitation for mobile, what alternative patterns are recommended for this Maximo / MAS Mobile version?

Before raising an IBM Case, I wanted to check whether this interaction limitation is already documented or by design for MAS Mobile, especially considering touch interactions, gesture handling, and nested components like data-list rows.

Appreciate any guidance or examples you can share.

Thanks,

Swagatika
 

Hi @Swagatika Rout,

I recommend reviewing the ASSETMOBILE application, as it contains multiple examples of toggle component usage.

For instance, on the Edit Asset page (id: editasset, controller: AssetEditDataController), there is a section called Linear Asset or Calibration which includes two toggles. I suggest reviewing the Calibration? toggle as a reference example.

<box direction="row" horizontal-align="center" vertical-align="center" padding-start="0" padding="1.5" fill-parent-horizontal="true" id="pbm7z">                <toggle label="Linear asset?" toggled="{dsEditAsset.item.islinear}" left-align-label="true" readonly="{page.state.isCalibration}" hidden="{!page.state.linearLicense}" on-toggle="handleLinearToggleEdit" id="n3nmw"/>                <toggle label="Calibration?" toggled="{dsEditAsset.item.iscalibration}" left-align-label="true" readonly="{page.state.isLinear}" on-toggle="handleCalibrationToggle" id="zzvag"/></box>

handleCalibrationToggle() {    let dsEditAsset = this.app.findDatasource("dsEditAsset");    this.page.state.isCalibration = !this.page.state.isCalibration;    dsEditAsset.item.iscalibration = this.page.state.isCalibration;    (...) }

File src/AssetEditDataController Method: updateAsset

/**   * Function to update asset.   */  async updateAsset(evt) {    let asset = evt.item;    this.page.state.saveInProgress = true;    const device = Device.get();    // istanbul ignore else    if (asset) {      let assetEditResource = this.app.findDatasource("dsEditAsset");      assetEditResource.currentItem.siteid = this.app.client.userInfo.insertSite;      assetEditResource.currentItem.islinear = this.page.state.isLinear;      assetEditResource.currentItem.iscalibration = this.page.state.isCalibration;      if(!this.page.state.isConditionCodeEnable) {        assetEditResource.updateRequired('conditioncode', false, assetEditResource.item, false);      }      try {        /* istanbul ignore else */        if (!assetEditResource.currentItem.islinear) {          // clear linear fields          assetEditResource.currentItem.direction = "";          assetEditResource.currentItem.lrm = "";          assetEditResource.currentItem.startmeasure = "";          assetEditResource.currentItem.endmeasure = "";          assetEditResource.currentItem.startdescription = "";          assetEditResource.currentItem.enddescription = "";          this.clearWarnings("lrm");          this.clearWarnings("startmeasure");          this.clearWarnings("endmeasure");        }        // istanbul ignore else        if (this.callDefaultSave) {          this.page.state.useConfirmDialog = false;        }        let response;        this.saveDataSuccessful = true;        assetEditResource.on("save-data-failed", this.onSaveDataFailed);        if (this.checkAssetMoveAllowed(assetEditResource.currentItem)) {          let moveResponse = await this.moveAsset(assetEditResource.currentItem);          // istanbul ignore next          if (moveResponse) {            this.displayWarningPopup(moveResponse);          }        }        if (this.page.state.classificationChanged) {          await this.updateSpecification(assetEditResource.currentItem);          this.page.state.classificationChanged = false;          this.clearTempEditDS();        }        /* istanbul ignore else */        if (!this.page.state.parentUpdatedFailed) {          let interactive = { interactive: !this.page.state.isMobile };          response = await assetEditResource.save(interactive);          this.page.state.saveInProgress = false;          /* istanbul ignore next */          if (response && assetEditResource.currentItem) {            let assetnum = assetEditResource.currentItem.assetnum;            let itemhref = assetEditResource.currentItem.href;            if (device.isMaximoMobile) {              this.app.pageStack.pop();              this.app.setCurrentPage({                name: "assetDetails",                resetScroll: true,                params: { assetnum: assetnum, href: itemhref },              });            } else {              /* istanbul ignore next */              if (response.items && response.items.length > 0) {                this.app.pageStack.pop();                if (response.items[0].href) {                  this.app.setCurrentPage({                    name: "assetDetails",                    resetScroll: true,                    params: {                      assetnum: assetnum,                      href: response.items[0].href                    },                  });                }              }            }          }        }      } catch (error) {        /* istanbul ignore next */        log.t(TAG, error);      } finally {        this.page.state.saveInProgress = false;        /* istanbul ignore else */        if (this.callDefaultSave) {          this.page.state.useConfirmDialog = true;        }        assetEditResource.off("save-data-failed", this.onSaveDataFailed);      }    }  }

To better understand why the update is not working, I suggest raising an IBM Case requesting IBM to share the Android debug build of the MAS Mobile application. This would allow you to connect to your environment and use Chrome DevTools to inspect the console and network logs.

The root cause may be related to the HREF value - since your datasource definition depends on woDetailResource, the object you are trying to update sits at the "second level" of the data hierarchy.

Hi @Bartosz Marchewka, 

Thank you for the detailed explanation and reference to ASSETMOBILE - that was helpful.
I wanted to clarify a bit more about my use case and current behavior:
- The toggle itself is working as expected when used inside standard sections (similar to the Linear / Calibration example you shared). The state updates correctly and the value is saved without issues there.
- I'm also able to update the same value from a role-based application - the toggle works via click+drag in that context as well.

However, my requirement is slightly different:
I need to place the toggle inside a side sliding drawer and within a <data-list>, because:
There can be multiple technicians added in the Assignment list.
Each technician row needs its own toggle-driven attribute update.

Issue Observed
In the MAS Mobile application, when the toggle is placed inside a <data-list> (row-level) or sliding drawer, the click / drag interaction does not respond.
The same UI definition behaves correctly (using click + drag) in the role-based (web) application, which makes this appear mobile-specific.

This leads me to a few questions:
Is this a known or expected behavior of <toggle> components when used inside a <data-list> on MAS Mobile?
Are there any shipped examples where:
A toggle is used inside a data-list row, or toggle is used inside a sliding drawer?
If this is a known limitation for mobile, what alternative patterns are recommended for this Maximo / MAS Mobile version?

Before raising an IBM Case, I wanted to check whether this interaction limitation is already documented or by design for MAS Mobile, especially considering touch interactions, gesture handling, and nested components like data-list rows.

Appreciate any guidance or examples you can share.

Thanks,

Swagatika
 

Hi @Swagatika Rout,

I recommend reviewing the ASSETMOBILE application, as it contains multiple examples of toggle component usage.

For instance, on the Edit Asset page (id: editasset, controller: AssetEditDataController), there is a section called Linear Asset or Calibration which includes two toggles. I suggest reviewing the Calibration? toggle as a reference example.

<box direction="row" horizontal-align="center" vertical-align="center" padding-start="0" padding="1.5" fill-parent-horizontal="true" id="pbm7z">                <toggle label="Linear asset?" toggled="{dsEditAsset.item.islinear}" left-align-label="true" readonly="{page.state.isCalibration}" hidden="{!page.state.linearLicense}" on-toggle="handleLinearToggleEdit" id="n3nmw"/>                <toggle label="Calibration?" toggled="{dsEditAsset.item.iscalibration}" left-align-label="true" readonly="{page.state.isLinear}" on-toggle="handleCalibrationToggle" id="zzvag"/></box>

handleCalibrationToggle() {    let dsEditAsset = this.app.findDatasource("dsEditAsset");    this.page.state.isCalibration = !this.page.state.isCalibration;    dsEditAsset.item.iscalibration = this.page.state.isCalibration;    (...) }

File src/AssetEditDataController Method: updateAsset

/**   * Function to update asset.   */  async updateAsset(evt) {    let asset = evt.item;    this.page.state.saveInProgress = true;    const device = Device.get();    // istanbul ignore else    if (asset) {      let assetEditResource = this.app.findDatasource("dsEditAsset");      assetEditResource.currentItem.siteid = this.app.client.userInfo.insertSite;      assetEditResource.currentItem.islinear = this.page.state.isLinear;      assetEditResource.currentItem.iscalibration = this.page.state.isCalibration;      if(!this.page.state.isConditionCodeEnable) {        assetEditResource.updateRequired('conditioncode', false, assetEditResource.item, false);      }      try {        /* istanbul ignore else */        if (!assetEditResource.currentItem.islinear) {          // clear linear fields          assetEditResource.currentItem.direction = "";          assetEditResource.currentItem.lrm = "";          assetEditResource.currentItem.startmeasure = "";          assetEditResource.currentItem.endmeasure = "";          assetEditResource.currentItem.startdescription = "";          assetEditResource.currentItem.enddescription = "";          this.clearWarnings("lrm");          this.clearWarnings("startmeasure");          this.clearWarnings("endmeasure");        }        // istanbul ignore else        if (this.callDefaultSave) {          this.page.state.useConfirmDialog = false;        }        let response;        this.saveDataSuccessful = true;        assetEditResource.on("save-data-failed", this.onSaveDataFailed);        if (this.checkAssetMoveAllowed(assetEditResource.currentItem)) {          let moveResponse = await this.moveAsset(assetEditResource.currentItem);          // istanbul ignore next          if (moveResponse) {            this.displayWarningPopup(moveResponse);          }        }        if (this.page.state.classificationChanged) {          await this.updateSpecification(assetEditResource.currentItem);          this.page.state.classificationChanged = false;          this.clearTempEditDS();        }        /* istanbul ignore else */        if (!this.page.state.parentUpdatedFailed) {          let interactive = { interactive: !this.page.state.isMobile };          response = await assetEditResource.save(interactive);          this.page.state.saveInProgress = false;          /* istanbul ignore next */          if (response && assetEditResource.currentItem) {            let assetnum = assetEditResource.currentItem.assetnum;            let itemhref = assetEditResource.currentItem.href;            if (device.isMaximoMobile) {              this.app.pageStack.pop();              this.app.setCurrentPage({                name: "assetDetails",                resetScroll: true,                params: { assetnum: assetnum, href: itemhref },              });            } else {              /* istanbul ignore next */              if (response.items && response.items.length > 0) {                this.app.pageStack.pop();                if (response.items[0].href) {                  this.app.setCurrentPage({                    name: "assetDetails",                    resetScroll: true,                    params: {                      assetnum: assetnum,                      href: response.items[0].href                    },                  });                }              }            }          }        }      } catch (error) {        /* istanbul ignore next */        log.t(TAG, error);      } finally {        this.page.state.saveInProgress = false;        /* istanbul ignore else */        if (this.callDefaultSave) {          this.page.state.useConfirmDialog = true;        }        assetEditResource.off("save-data-failed", this.onSaveDataFailed);      }    }  }

To better understand why the update is not working, I suggest raising an IBM Case requesting IBM to share the Android debug build of the MAS Mobile application. This would allow you to connect to your environment and use Chrome DevTools to inspect the console and network logs.

The root cause may be related to the HREF value - since your datasource definition depends on woDetailResource, the object you are trying to update sits at the "second level" of the data hierarchy.