How to display size property on custom content types

[bip1989]

Hi Team

I need to display the size of custom content types on the details view page in read only format. 

I searched in this fourm and tried using:

<field-visibility>
   <show id="size"/>
</field-visibility>

It works and shows the size same as what i see in node browser. 

But it also shows the size as editable when i go to edit properties. Another thing i wanted to implement, how can i show the size in KB,MB, GB etc formats. 
Currntely it shows bytes which is understandable for me but not for general users. Do i need to customize the form?

I am still a learner so pardon for these silly questions. 

Appreciate your guidance. 

[abhinavmishra14 · Accepted solution]

Whatever you tried is correct. You can add for-mode to the field to display only when you view the properties on details page. 

<field-visibility>
    <show id="size" for-mode="view"/>
</field-visibility>

This will display the size property on view details page but it will be hidden on edit properties page.

There is 3 mode for a property while configuring a share form. These modes are: create,view and edit.

Create: displays the property only in create mode. i.e. when you configure "model-type"

View: displays the property only in view mode i.e. on view details page

Edit: displays the property on edit page. i.e. edit properties.

Here are some good docs which you can refer to know more about form config: 

https://docs.alfresco.com/6.0/references/forms-reference.html

https://hub.alfresco.com/t5/alfresco-content-services-hub/forms-examples/ba-p/290049 

To display the size in formatted manner you need to use a custom freemarker template. You need to use an utility to format the size within custom template: Alfresco.util.formatFileSize(....)

There is an out of the box template as well which you can use: "/org/alfresco/components/form/controls/size.ftl" or you can create your own as well if you want to add any additional info,

You can see a example of custom form controls here: https://hub.alfresco.com/t5/alfresco-content-services-hub/forms-examples/ba-p/290049#w_providingacus...

Here is a full example:

<!-- Assuming demo:myContent is the custom content type -->
<config evaluator="node-type" condition="demo:myContent">
	<forms>
		<form>
			<field-visibility>
                               
				<show id="size" for-mode="view"/>
			</field-visibility>
			<appearance>

				<field id="size">
				    <!-- This file resides under <yourShareModule>/src/main/resources/alfresco/web-extension/site-webscripts/com/custom/components/form/controls/custom-size-display.ftl -->
					<!-- You can create folder structure as given above in your share module. There is no hard and fast rule however, you can create any folder structure and keep the templates. 
					     But it must be within <yourShareModule>/src/main/resources/alfresco/web-extension/site-webscripts/-->
					<control template="/com/custom/components/form/controls/custom-size.ftl" />
				</field>
			</appearance>
		</form>
	</forms>
</config>

------------------------------------------------------------------
custom-size.ftl: Here it displays formatted value as well as the original value in Bytes
------------------------------------------------------------------

<#if field.control.params.property??>
   <#-- use the supplied property to retrieve the size value -->
   <#assign size="0">
   <#assign contentUrl=form.data["prop_" + field.control.params.property?replace(":", "_")]!"">
   <#if contentUrl?? && contentUrl != "">
      <#assign mtBegIdx=contentUrl?index_of("size=")+5>
      <#assign mtEndIdx=contentUrl?index_of("|", mtBegIdx)>
      <#assign size=contentUrl?substring(mtBegIdx, mtEndIdx)>
   </#if>
<#else>
   <#assign size=field.value>
</#if>

<div class="form-field">
   <div class="viewmode-field">
      <span class="viewmode-label">${msg("form.control.size.label")}:</span>
      <span id="${fieldHtmlId}" class="viewmode-value"></span>
      <span class="viewmode-value" data-dataType="${field.dataType}">(${field.value} Bytes)</span>
   </div>
</div>

<script type="text/javascript">//<![CDATA[
YAHOO.util.Event.onContentReady("${fieldHtmlId}", function ()
{
   YAHOO.util.Dom.get("${fieldHtmlId}").innerHTML = <#if size?is_number>Alfresco.util.formatFileSize(${size?c})<#else>"${msg("form.control.novalue")}"</#if>;
}, this);
//]]></script>

[bip1989]

Thanks for the solution Abhinav. It worked for me. And thanks for the links as well. Those are very helpful