Hey guys -
This is a variant of the idea posted in this thread and the other thread mentioned. There are other ways to accomplish this that are more elegant but for standard “text” fields, this should do the trick for any field (UI or SObject backed) for read/readonly & edit modes.
Keep in mind that this is just “masking” the input, it is not encrypting it. You can of course encrypt the data (even in a UI only field) but that gets much more complicated and I don’t think that is what you are after here.
You’ll notice that for ‘edit’ mode, I deferred masking over to the browser. The reason for this is that it’s the simplest approach. The renderers mentioned previously in this post and the other wouldn’t work for edit mode. There are alternate ways to hook the input and then manually mask the character but it’s just as easy to have the browser do the heavy lifting
(function($, $S, undefined){
$S.snippet.registerSnippet('passwordRenderer', function(field, value) {
var displayType = field.metadata.displaytype
, renderer = skuid.ui.fieldRenderers[displayType]
, mode = field.mode
, displayValue = $S.utils.decodeHTML(value);
// if not in edit mode and we have a value, then we will 'mask' it
if (mode !== 'edit' && displayValue !== null && displayValue !== undefined) {
var valueAsString = value.toString()
, stringLength = valueAsString.length;
displayValue = Array(stringLength).join('*');
}
// use the standard skuid renderer for this field
renderer[mode](field, displayValue);
// if we are in edit mode, mark the input field to password and let the browser take care of masking the input
if (mode === 'edit') {
$(field.element).find('input').attr('type', 'password');
}
});
})(skuid.$, skuid);
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account"> <models>
<model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account" adapter="" type="">
<fields>
<field id="Name"/>
<field id="CreatedDate"/>
<field id="Code" uionly="true" displaytype="TEXT" label="Code"/>
</fields>
<conditions>
<condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
</conditions>
<actions/>
</model>
</models>
<components>
<pagetitle model="Account" uniqueid="sk-1-E51H-70">
<maintitle>
<template>{{Name}}</template>
</maintitle>
<subtitle>
<template>{{Model.label}}</template>
</subtitle>
<actions>
<action type="delete"/>
<action type="clone"/>
<action type="share"/>
<action type="savecancel" window="self"/>
</actions>
</pagetitle>
<basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-1-E51I-71">
<columns>
<column width="100%">
<sections>
<section title="Basics">
<fields>
<field id="Name"/>
<field id="Code" valuehalign="" type="CUSTOM" cssclass="" snippet="passwordRenderer"/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
<resources>
<labels/>
<css/>
<javascript>
<jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function($, $S, undefined){
$S.snippet.registerSnippet('passwordRenderer', function(field, value) {
var displayType = field.metadata.displaytype
, renderer = skuid.ui.fieldRenderers[displayType]
, mode = field.mode
, displayValue = $S.utils.decodeHTML(value);
// if not in edit mode and we have a value, then we will 'mask' it
if (mode !== 'edit' &amp;&amp; displayValue !== null &amp;&amp; displayValue !== undefined) {
var valueAsString = value.toString()
, stringLength = valueAsString.length;
displayValue = Array(stringLength).join('*');
}
// use the standard skuid renderer for this field
renderer[mode](field, displayValue);
// if we are in edit mode, mark the input field to password and let the browser take care of masking the input
if (mode === 'edit') {
$(field.element).find('input').attr('type', 'password');
}
});
})(skuid.$, skuid);</jsitem>
</javascript>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>