Why does the dropdown variable doesn't work on mobile app

[rafas_2703]

Hi everyone!

I have a custom variable on my record producer that works perfectly on desktop. The thing is that variable doesn't work on my mobile app.

The variable is type "custom" with a widget associated with it.

The widget has the following code:

HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        $("button").click(function(){
          $("#div2").toggle();
        });
      });
    </script>
   
<div class="div1">
  <h4 style="margin-right: 10px; font-family: SourceSansPro, Helvetica, Arial, sans-serif; font-size:15px">Watchlist</h4>
<button class="button"><img  style="height: 30px; width: 100%" src="sn_hr_core.watchlist_eye.png"></button>
</div>
 
    <div id="div2" style="display: none;">
      <div class="watchlist-container">
    <!-- Seu HTML para Watchlist aqui -->
    <span class="watchlist">
        <div class="text-muted light field">
            <div class="picker">
                <sn-record-picker field="username" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="10" multiple="true" default-query="'active=true^nameISNOTEMPTY^u_myhr_opcoDYNAMIC9e0801c01b6e74500f156280604bcb96'"></sn-record-picker>
            </div>
        </div>
    </span>
</div> 
    </div>

CSS:

#toggleButton {
   /*display: none;*/
}

.toggle-label {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

.toggle-label img {
    width: 40px; /* Largura da imagem */
    height: 40px; /* Altura da imagem */
  	margin-right: 10px;
}

.watchlist-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.watchlist {
    position: relative;
}

/* Quando o checkbox estiver marcado, esconda a Watchlist */
#toggleButton:checked ~ .watchlist-container .watchlist {
    display: none;
}


.button{
 background-color:white;
  border-color: rgb(192, 192, 192);
}

.div1{
display: flex;
justify-content: flex-end;
  margin-bottom: 10px;
}

.hidden{
display:none;
}

#mydiv{
height:50px;
width:50px;
color:white;
background-color:blue;
padding:10px;
}

Client controller:

api.controller = function($scope, $http, spScUtil, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, i18n, $timeout, $log, spAriaUtil, $document, spModal, $q, spAtf, $location, spAriaFocusManager, spSCNavStateManager, cabrillo) {

    /* widget controller */

    var c = this;

   $scope.username = {

        "name":"Users"

    };

    $scope.$on("field.change",function(event,parms){

        // alert(JSON.stringify(parms.field.value));

        //alert(JSON.stringify($scope.page.g_form.getValue('watchlist_collector')));

        //$scope.username.value = "";

        $scope.page.g_form.setValue('watchlist_collector',parms.field.value);

    });

Appreciate all the help I can get!!

Thanks!