How to hide non-editable profile fields in DrupalGap?

Question

In the Drupalgap user profile there is a field that should be viewable, but not be editable by the user. I am using field permissions and the permissions are respected - the user cannot change/save/update the value.

But the field is shown in the edit view of the profile a looks editable. Is this intended?

How can I hide the field in the edit user view? Is targeting the specific field(s) individually with hook_form_alter the best way?

/**
* Implements hook_form_alter().
*/

function my_module_form_alter(form, form_state, form_id){
 try {

console.log("Form ID " + form_id); // Use to see the form id.
console.log("FORM: " + JSON.stringify(form));    // Use to inspect the form.

if (form_id == 'user_profile_form') {
   $('#edit-user-profile-form-field-points-und-0-value').css("background-color","yellow"); // not working
   $('#edit-user-profile-form-field-points').css("background-color","yellow"); //not working
   $('#edit-user-profile-form-field-points-und-0-value').hide(); //not working

// not working from: https://www.drupal.org/node/2170427: 
 form.elements.edit-user-profile-form-field-points-und-0-value = {
 // type: 'textfield',
 // title: 'My Text Fied',
  options: {
    attributes: {
      disabled: 'disabled'
    }
  },
  access: false /* use this to completely hide the form element */
};

console.log("this is user_profile_form");
}
}
 catch (error) { console.log('my_module_form_alter - ' + error); }   
}

Answer 1

During hook_form_alter() implementations in DrupalGap, the form hasn't yet been rendered into the DOM, so at that point it is not yet possible to use jQuery selectors on the form.

Instead use an inline JS event (attach it to the form's prefix or suffix during the form alter). Your inline JS page event handler can have a custom function, and that custom function can do the custom jQuery selectors. Also, that appears to be the incorrect usage of the access property. Try this instead:

// During hook_form_alter()...
form.elements['field_points'].access = false;
form.suffix += drupalgap_jqm_page_event_script_code({
    page_id: drupalgap_get_page_id(),
    jqm_page_event: 'pageshow',
    jqm_page_event_callback: 'my_user_profile_form_pageshow',
    jqm_page_event_args: JSON.stringify({
        hello: 'Hi!'
    })
});

Then make a custom function:

function my_user_profile_form_pageshow(options) {
  $('#edit-user-profile-form-field-points-und-0-value').css("background-color","yellow");
  $('#edit-user-profile-form-field-points').css("background-color","yellow");
  $('#edit-user-profile-form-field-points-und-0-value').hide();
}