Custom Layout for sp-model/spModel ( Istanbul )

[praveenmuramal1]

Istanbul Service Portal

Custom Layout For Form Widget

(sp-model / spModel)

NOTE:

This is not the only way to create provide custom layout, there are other ways to do it. Always make sure if ServicePortal has a new feature to do the same with low code approach.

*** Make sure you test all your changes ***.

Understanding this feature will enable you to customize other angular directives that Service Portal has created.

It is considered good practice to use decorators when we extend third party directive, but in this document I am not using decorators.

When using this feature make sure you test the layout looks good on your mobile device too. One reason I believe that ServiceNow is sticking to the 2 column layout is to make the UI responsive.

Finally I appreciate if you can provide some feedback about this approach 🙂

There is much less intrusive way to change the layout, which I will explain in a subsequent post.

• Why do we need to extend the Form-Widget

  • ServiceNow Form Views

  • How does Service Portal layouts the Fields

  • Can we display more than 2 fields in a row ?

  • Can we Hide the label of a field if required ?

  • Can I display a label next to a field rather than on the top of the field ?

  • Can we create a form which doesn't look like the way we created in ServiceNow Platform.

• AngularJS Directive : spModel

  • Usage

  • Properties to Set

  • templateURL

  • sp_model.xml

• Extending AngularJS Directive : spModel

  • Create ng-template

  • Include the ng-template in widget

Why do we need Custom Layout for the Form-Widget

ServiceNow Form Views

ServiceNow platform allows to create different views for a form - this allows users to use certain view.

Incident Form in ServiceNow Standard Platformhttps://istanbul.service-now.com/incident.do

How does Service Portal layouts the Fields in a Form-Widget

The Layout of Fields is derived from the FORM-View that is configured in ServiceNow Standard Platform.
ServicePortal Form Widget can be configured to use a specific view that is created in the Standard ServiceNow Platform. The Form will look the same in both ServiceNow Platform and ServicePortal.
Form-Widget retrieves the layout of the configured view and uses OTB template (sp_model.xml)   to render the form. sp_model.xml is HTML code that can be processed by AngularJS.

Can we configure to display more than 2 fields in a row in the ServiceNow Form View ?

No

Can we Hide the label of a field if required in the ServiceNow Form View ?

  No

Can we change position of the label in the ServiceNow Form View ?

  No

Can we create a form which doesn't look like the way we created in ServiceNow Platform.

OTB ServicePortal Form-Widget retrieves the view layout and renders the fields. If we use OTB ServicePortal Form-Widget we can't change the   layout of the fields.

Incident Form in ServicePortalhttps://istanbul.service-now.com/lbl_test/?id=form&sysparm_domain_restore=false&sysparm_stack=no&tab...

Components of OTB Form-Widget:

• List of all the Attachments
• UI Actions Links
• ServiceNow Form-View
• Related Lists
• Save or New Button
• Display which Mandatory Fields needs to be filled.

AngularJS Directive : spModel

ServicePortal uses AngularJS directive called spModel to render the fields of a Form-View. spModel directive is developed by ServicePortal and is automatically available for all the widgets.spModel directive provides many features that are required for a form-fields.

• required fields
• associate client scripts to the fields
• Handle UI Policies
• Field length validation and many more

Usage of spModel in Form-Widget:

HTML Code:

<sp-model form_model="data.f" mandatory="mandatory"></sp-model>

form_model - requires JSON Data with information about Form Sections / Fields / Layout of the Fields / required fields / Field Labels / Client Script functions / Save or New Functions.

Calling $sp.getForm in server script is required to pass data to the spModel

mandatory - JSON Data with any additional required attributes.

Note:

spModel directive is referred as sp-model in the HTML(AngularJS specific)

Server Script:

data.f = $sp.getForm(data.table, data.sys_id, data.view);

data.table = table name

data.sys_id = valid Sys ID or -1 for a new record

data.view = name of the FORM View / Don't pass the parameter for default View.

$sp.getForm is implemented by ServiceNow. It calls ServiceNow Server Function to retrieve data related to Fields / Sections / Client Scripts / UI Policies / field Lengths.

templateURL

spModel directive uses sp_model.xml (ng-template) to render the fields on a form.   ServicePortal includes sp_model.xml in all of its pages. ng-template is HTML Code that could include AngularTags and is processed by AngularJS.

The templateUrl in the spModel directive uses sp_model.xml that is automatically included by the ServicePortal in all its pages. It is not possible to change the way spModel renders the Form View.

As a ServicePortal Developer we don't have control to make changes to spModel directive and the template it will use. But we can create a new Directive ( Widget Angular Provider ) which extends the OTB spModel Directive but provide a new source for templateUrl attribute.

One Time Task 1: Admin will create a new Widget to copy the OTB sp-model.xml in a widget for easy access. Developers can always use the browser tools to retrieve the sp-model.xml

Step 1: Navigate to ServicePortal > Widgets > create a new widget with widget id "lbl-sp-model-xml"

Step 2: Copy the code from the script tag of sp_model.xml using browser tools

Step 3: Paste the code in the HTML Template of the widget.

One Time Task 2: Admin will create a new Widget Angular Provider that extends the OTB spModel Directive. The new directive lblspModelCustomTemplate will inherit all the features of spModel but with a new source for the templateUrl.

Now we need to use the new Directive in the place of spModel Directive.

Since the layout for a form is specific to the table we will create a new Form widget by Cloning the existing Form - widget.

Step 1: Navigate to ServicePortal > Widgets > search for widget id "widget-form"

Step 2: Choose option Clone Widget.

Step 3: Provide a new name to the form. Make sure you start the widget name with LBL and end with Table Name.

  Naming convention: LBL Form < Table Name >

  Widget ID : lbl-form-<TableName>

Create ng-template:

Step 4: Scroll down to the bottom of the Widget to select the tab Angular ng-templates and select New.

  Step 4.1: In a different browser tab Navigate to Service Portal > Widgets and Search for lbl-sp-model-xml

Copy the "HTML Template" of the widget which contains the HTML code of OTB sp_model.xml that is used by spModel for rendering the form fields.

Step 5: Paste the HTML Template code as a starting point for customizing the field layout. create a ng-template for a widget which can then be passed to the Extending spModel Directive.

Step 7:   Include the ng-template in the widget HTML template

Add following code in the beginning of HTML Template of the new Form-Widget created in Step 3

The Id of the script tag is same as the source name of templateUrl that is provided in the Extended spModel Directive

ServiceNow's spModel Directive is an angularjs Directive. Inorder to extend spModel we need to use the same principles we use to extend an angularjs directive.

by following step 7 we can extend the spModel Directive.

**************************************************************************************************

// argument we pass here to the function is spModelDirective is an array,

// angularJs library interprets spModelDirective as below

//           angularJs finds all the directives that has a name spModel and creates and array

//           and passes the array to the function as an argument

**************************************************************************************************

function(spModelDirective){

                  // 3 arguments are passed to angular.extend

                  // argument 1 : {}   and empty object

                  // argument 2:   spModelDirective[0] - since we only have one spModel directive we use first element in the array.

                  // argument 3: {templateUrl : 'lbl_custom_template.xml'}   - the argument that we want to pass to replace the existing attributes value

              return angular.extend(   {} , spModelDirective[0]   ,     {templateUrl : 'lbl_custom_template.xml'}   ) ;

}

breaking down above code:

spModelDirective   >> Servicenow directive we want to extend ( spModel +

Directive )

angular.extend           >> angular.extend is an angularjs function copies 2

objects

spModelDirective[0]   >> argument to angular.extend function. In angularjs

the way to refer to a directive is by joining 2 words spModel and Directive

templateUrl : 'lbl_custom_template.xml'   >> new attribute that we update

in the spModel directive

The ng-include is the same name as the ng-template that is created for the widget.

Step 8: Associate the Extended Angular Directive to the Cloned Form-Widget created in Step 3

Step 8.1: Scroll to the bottom of the page and select tab - Angular Providers

Step 8.2: Select Edit and choose the Extended Angular Directive

( lblspModelCustomTemplate)

  This will provide the ability for the cloned form-widget to use the extended angular directive.

Step 9: Replace the spModel Directive tag to use the new Extended lblspModelCustomTemplate Directive.

Step 9.1: Comment the sp-model tag

Step 9.2: Add new tag lblsp-model-custom-template

              <lblsp-model-custom-template form_model="data.f" mandatory="mandatory">

</lblsp-model-custom-template>

[dylan_lindgren]

Note that none of the above is necessary in Jakarta, as in this release the spModel directive actually accepts a parameter called template-url. You can simply create a sp_ng_template record on the widget with your own custom template, and supply the name of that template through this parameter and it will be used instead of the default template (sp-model.xml).

This is an undocumented and I'm sure unsupported feature in Jakarta, however if you're willing to extend the spModel directive as has been discussed in this thread then using this parameter is a more light-weight alternative to that.

[praveenmuramal1]

Thank you for very useful information. good to know it is solved in Jakarta

For customers who just upgraded to Istanbul this would still be useful and

when they move to Jakarta or a later version, they could still reuse the

same template and leave the configuration/customization behind.

I still think changing template is tricky business as the spModel directive

could be updated by servicenow any time without customers having to go

through an update cycle. I am not saying SN would do it but it is a

possibility.

On Tue, Aug 8, 2017 at 6:12 PM dylan.lindgren <

[praveenmuramal1]

Updated the document with a step that I was missing earlier. Thanks to hsafi1 for pointing it out.

[helmandsafi]

Thank you Parveen,

With your instructions, i was able to create a form which renders tabs, similar to the back end form with tabs.

Only issue i have now is that the UI actions no longer work.

I will look and see what's going on there.

Thank you again for sharing this.

[praveenmuramal1]

Hello Safi, you may provide me the update set to check what is going on

[vincepg13]

Hey Helmand, this is something I've been trying to do. Would you be open to sharing?

[praveenmuramal1]

vincent.fisher.tu   did you get a chance to try the steps   ?

[vincepg13]

Yes, all seems to make sense, although didn't get very far. When I go to an active cab workbench session and into the Elements, "sp_model.xml" only contains one line of HTML.

[praveenmuramal1]

Are you using Jakarta?

[vincepg13]

Yes, but i get the same with an Istanbul instance too

[helmandsafi]

I saw the same thing...

Only one line of HTML appears under the sp_model.xml

glide-istanbul-09-23-2016__patch8-07-07-2017

[praveenmuramal1]

Thanks for confirming vincent.fisher.tu helmandsafi

Looks like SN updated the sp_model.xml

and added below

• new directive spVariableLayout ( invoked as sp-variable-layout)
• new xml file sp_variable_layout.xml

and moved most of the code from sp_model.xml to sp_variable_layout.xml ( Look at the screenshots below New and Old)

I believe there is a good reason to do that, which is not to mess with the core spModel directive which has lot of form functionality.

New

Old:

From what I see what needs to be done is ( in the meanwhile I update the document 😞

copy the template code from "sp_model.xml" and "sp_variable_layout.xml" and use them in the step > One Time Task 1 that creates the lbl-sp-model-xml

And

remove the tag <sp-variable-layout></sp-variable-layout>

[JJ1]

Is there a way to render field of type days of week in the user profile widget ?

[praveenmuramal1]

On top of my head I don't think so, but I would have to check.

thanks,

Praveen Muramalla,

X 6711

On Tue, Sep 26, 2017 at 4:05 PM, jeevankj <community-no-reply@servicenow.com

[andrewwaites]

Thank you Praveen.   I have tried the method in this post on Helsinki Patch 11.   Are you aware if this process should work on Helsinki or is there a change in the processing from Helsinki to Istanbul that would not allow it?

[praveenmuramal1]

Sorry I didn't get a chance to try in Helsinki. I would like to hear how it

works in Helsinki ?

On Sun, Oct 1, 2017 at 9:03 AM andrewwaites <

[andrewwaites]

So I can tell you that generally the approach above did do something because when I was following these instructions in the custom form widget I used custom_incident_template but that was not the table I was using and was getting sporadic behavior.   Once I changed it to the table/name I was using the form rendered just fine.     That said, how do you verify that once the form is rendered, the url is pointing to the correct file?

What I am trying to accomplish is put in a slush bucket control on a form instead of the original multi-select/multi-value control for a list collector variable and/or form field.

I used the concepts and directions you provided for updating spModel to call a new url that also overwrites the url for the form field directive where I was going to inject the code to call the (cloned) slush bucket widget and also make sure the widget provides value like the original control.

I am not seeing when using the developer tools neither the updated spModel.xml code nor the updated sp_form_field.xml file where I was injecting the override for the slushbucket widget.

From what I can tell I believe that I have followed your directions to the T, but other than working with the incident table I am working with dmn_demand table and changed the labels I am using to demand instead of incident.

[praveenmuramal1]

Sorry for the late reply... would you be able to share an update set with the changes you made ? I think we can fix it.

[praveenmuramal1]

skwiirrel

Agreed.. for spModal we are better off creating a new directive.

[dylan_lindgren]

Note that this article is about spModel, not spModal. Confusingly similar names I know, but they offer two completely different functions in Service Portal.

• spModel is the name of the directive which contains the majority of the form functionality in Service Portal.
• spModal allows you to create modal dialog boxes.

[Patrick Schulte]

You are right, I didn't read carefully enough. I deleted my comment to avoid further confusion .

[andrewwaites]

I am not certain if these are all of the updates isolated to what I tried to do above.     I have the update set ready how do I upload to the reply?

[praveenmuramal1]

I never uploaded a document either. may be you can put it in your google drive or dropbox and share the link ?

[praveenmuramal1]

I've attached an updateset, please check to see if it works for you.

[davilu]

hey praveenmuramalla, can you expand on One Time Task 2?   How do you extend the OTB spModel directive?   Thanks!

One Time Task 2: Admin will create a new Widget Angular Provider that extends the OTB spModel Directive. The new directive lblspModelCustomTemplate will inherit all the features of spModel but with a new source for the templateUrl.

[praveenmuramal1]

ServiceNow's spModel Directive is an angularjs Directive. Inorder to extend spModel we need to use the same principles we use to extend an angularjs directive.

by following step 7 we can extend the spModel Directive.

**************************************************************************************************

// argument we pass here to the function is spModelDirective is an array,

// angularJs library interprets spModelDirective as below

//           angularJs finds all the directives that has a name spModel and creates and array

//           and passes the array to the function as an argument

**************************************************************************************************

function(spModelDirective){

                  // 3 arguments are passed to angular.extend

                  // argument 1 : {}   and empty object

                  // argument 2:   spModelDirective[0] - since we only have one spModel directive we use first element in the array.

                  // argument 3: {templateUrl : 'lbl_custom_template.xml'}   - the argument that we want to pass to replace the existing attributes value

              return angular.extend(   {} , spModelDirective[0]   ,     {templateUrl : 'lbl_custom_template.xml'}   ) ;

}

breaking down above code:

spModelDirective   >> Servicenow directive we want to extend ( spModel +

Directive )

angular.extend           >> angular.extend is an angularjs function copies 2

objects

spModelDirective[0]   >> argument to angular.extend function. In angularjs

the way to refer to a directive is by joining 2 words spModel and Directive

templateUrl : 'lbl_custom_template.xml'   >> new attribute that we update

in the spModel directive

thanks,

Praveen Muramalla,

X 6711

[davilu]

Thanks Praveen!   I followed your directions above and triple checked that I did it exactly as you described, but it still doesn't work for me.   Just to clarify, I've cloned the OTB widget-form widget and called it lbl-form-questionnaire.   I've added the <script> in the first three lines of the Body HTML Template as indicated in step 7:

In my Angular Provider related list at the bottom of the page I added the lblspModelCustomTemplate which includes the code mentioned above:

function customTemplate(spModelDirective){

return angular.extend({}, spModelDirective[0], {

templateURL:'lbl_custom_template.xml'

});

}

Because this is a clone of the OTB form widget, there is another Angular Provider (spAttachmentManager), which I'm assuming should be fine.

In the ng-templates related list, I created a template with id=custom_template_questionnaire and combined both the sp-model.xml and sp-variable-layout.xml (making sure to remove <sp-variable-layout></sp-variable-layout>):

<div>

  <div ng-if="formModel._sections == null || formModel._sections.length == 0" ng-init="execItemScripts()"></div>

</div>

<fieldset ng-init="$last ? execItemScripts() : null" ng-show="isContainerVisible(container)" ng-repeat="container in containers">

    <legend ng-if="(container.caption || container.captionDisplay)" class="h4">{{container.captionDisplay || container.caption}}</legend>

    <div class="row">

          <div class="col-md-{{12 / container.columns.length }}" ng-repeat="column in container.columns">

                <div ng-repeat="f in column.fields" id="{{getVarID(f)}}" ng-switch="f.type" ng-class="{'form-inline': isInlineForm === true }">

                      <div ng-if="formModel._fields[f.name]" ng-switch-when="label" ng-show="formModel._fields[f.name].isVisible()">

                            <label ng-bind-html="::f.label"></label><span ng-if="::formModel._fields[f.name].instructions" ng-bind-html="::formModel._fields[f.name].instructions"></span>

                            <p ng-bind-html="::formModel._fields[f.name].help_text" ng-if="::formModel._fields[f.name].help_text" title="{{::formModel._fields[f.name].help_tag}}" class="help-block"></p>

                            <hr class="sp_label_hr">

                            <!--</hr>-->

                      </div>

                      <sp-form-field ng-show="formModel._fields[f.name].isVisible()" form-model="formModel" ng-if="formModel._fields[f.name]" field="formModel._fields[f.name]" ng-switch-when="field" glide-form="getGlideForm()"></sp-form-field>

                      <sp-variable-layout ng-init="containers=[f]" ng-switch-when="container"></sp-variable-layout>

                      <sp-variable-layout ng-init="containers=f.containers" ng-switch-when="checkbox_container" class="checkbox-container"></sp-variable-layout>

                      <sp-widget widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}" ng-if="formModel._formatters[f.id].widgetInstance" ng-switch-when="formatter"></sp-widget>

                      <hr ng-switch-when="break">

                      <!--</hr>-->

                </div>

          </div>

    </div>

</fieldset>

Am I missing anything or doing anything incorrectly?   I'm pretty lost on why this isn't working in our instance.

Thanks!

[praveenmuramal1]

what is the name you gave in the Angular ng-templates ? can you show the screen shot of that ?

[davilu]

sure thing:

When I click in, this is what my code looks like:

[praveenmuramal1]

one more thing can you provide screenshot of Widget Angular Provider ?

function customTemplate(spModelDirective){

return angular.extend({}, spModelDirective[0], {

templateURL:'lbl_custom_template.xml'

});

}

Replace above with below code :

function (spModelDirective){

return angular.extend({}, spModelDirective[0], {

templateURL:'lbl_custom_template.xml'

});

}

[davilu]

Thanks Praveen, made the change:

If everything is right, without changing the template, I should be able to pull up my new cloned form widget via spModal right?   I realize that without changing the template, it'll still look like the OTB form widget, but just wanted to make sure my thought process is correct.  

[praveenmuramal1]

If everything is right, without changing the template, I should be able to pull up my new cloned form widget via spModal right?   I realize that without changing the template, it'll still look like the OTB form widget, but just wanted to make sure my thought process is correct.

with

"yes" if you meant to say

without changing the template >> by implying without passing templateURL attribute in the extended directive

it is not spModal >> it is spModel  

[praveenmuramal1]

If you still have problems - would you be able to create an update set with the changes you are trying to make ? so that I can import them in my developer instance to see what is causing the problem

[davilu]

Hey Praveen,

let me try to transfer this over to my personal dev instance and then give you access so you can check it out.   Would love to get your advice on what's going on.   I'll provide you with the login credentials when I get this done.   Thanks!

[praveenmuramal1]

sure no problem.

[davilu]

Hey praveenmuramalla, my dev instance is ServiceNow   and the login credentials are praveenm/pw: password.   Would love your advice on what I'm doing wrong.   Thanks!

[praveenmuramal1]

https://dev41068.service-now.com/sp/?id=form_test&sys_id=c82a9a64db470300b11c771c8c96198f&table=x_82643_my_custom_birthdate_test&spa=1

thanks,

Praveen Muramalla,

X 6711

[davilu]

Hey Praveen, thanks! How did you generate that view?   So does this mean that what i've done works?   I guess I must be confused on how the Form widget works.   When I tried to use the new template to pull the HR Profile form through uibModal, I couldn't seem to get it to work.   I'll try again today.   Thanks for the help!

[praveenmuramal1]

In step 7 the attribute for specifying new template is "templateUrl" you

specified that as "templateURL" I updated your custom angular directive

On Tue, Dec 12, 2017 at 7:08 AM davilu <community-no-reply@servicenow.com>

[davilu]

Thanks praveenmuramalla!   I have one more question.   Our goal is to not only change the layout of the OTB form template, but to also change the look and field of the inputs of the form as well.   I'm now attempting to change the xml file for spFormField and am having problems getting it to work.   I'm following the same steps where I create a new directive (lblspFormFieldCustom) by extending the OTB spFormField:

function (spFormFieldDirective){

return angular.extend({}, spFormFieldDirective[0], {

templateUrl:'lbl_custom_form_field.xml'

});

}

Then I copied the sp_form_field.xml from my page inspector and pasted it into a new ng-template.

Lastly, I went back to my other template for sp_model and sp_variable_layout and added this at the top:

<script type="text/ng-template" id="lbl_custom_form_field.xml">

<div ng-include="'custom-template-form-field'"></div>

</script>

And I also changed <sp-form-field> to <lblsp-form-field-custom>.

I thought I did this correctly, but all the fields are not rendering on my screen.   What am I missing?   Thanks!

[praveenmuramal1]

Hi David, please send me a screenshot and URL.

thanks,

Praveen Muramalla,

X 6711

On Thu, Dec 14, 2017 at 12:10 PM, davilu <community-no-reply@servicenow.com>

[davilu]

hey praveenmuramalla, sorry for the delay.   When you have a minute, do you mind checking out SP Loading page, on tab two I have two questions.   In the system form, there's a UI policy in place where the second question does NOT appear unless the checkbox is true.   In the OTB form widget (SP Loading page ), the UI Policy works great, but in my custom template, the UI Policy doesn't seem to work.   Am I missing something?   I'm just changing the template of the form widget, so I was assuming the UI Policies and Client Scripts would work.   Thanks again for all your help!   Btw, your login/password for my dev instance are the same as before.

[praveenmuramal1]

Hi David, Just got a chance to look in to it. It seems to be working. did

you fix it ? what is the solution ?

thanks,

Praveen Muramalla,

X 6711

On Fri, Dec 15, 2017 at 10:40 AM, davilu <community-no-reply@servicenow.com>

[praveenmuramal1]

I like the material view you are using. It looks very clean

thanks,

Praveen Muramalla,

X 6711

On Fri, Dec 15, 2017 at 10:40 AM, davilu <community-no-reply@servicenow.com>

[davilu]

hi praveenmuramalla, thanks!   yes, I solved the UI Policy issue over the weekend, but am now stuck on how to change the spChoiceList and spReferenceField directives to reflect Material design.   Both those directives use select2 library, which doesn't work with <md-select> tags and we can't figure out how to edit the code so it works.   Any thoughts?   Thanks for all your help!

[praveenmuramal1]

Great you figured out the UI Policy issue. Could you please elaborate on

the issue and solution.

Regarding customizing directives spChoiceList and spReferenceField. I

haven't done that with material design yet. I need some time to look into

those. Is it the issue that the value won't set after you select from the

drop down ?

thanks,

Praveen Muramalla,

X 6711

[davilu]

yea sure, in my html for the new form template, I originally had the ng-if in the <legend> tag in my <md-tab> tag.   So when it wasn't working, my code looked like  

<md-tab ng-if="(container.caption || container.captionDisplay)" ng-init="$last ? execItemScripts() : null" ng-show="isContainerVisible(container)" ng-repeat="container in containers" label="{{container.captionDisplay || container.caption}}">

When I separated that portion out so that it looks like:

  <md-tab ng-init="$last ? execItemScripts() : null" ng-show="isContainerVisible(container)" ng-repeat="container in containers" label="{{container.captionDisplay || container.caption}}">

      <legend ng-if="(container.caption || container.captionDisplay)"/>

Then all of the UI Policies started to work as expected.

As for the spChoiceList and spReferenceField directives, part of the issue is that the value won't set AND save after I select from the drop down.   I'm pretty sure that the select2 library is interfering with this, but not sure how to take out select2 without screwing up the code.   Thanks!

[davilu]

Hey helmandsafi, were you able to format your form to have tabs?   I'm trying to do the same thing, but am running into an issue where all splits within a section are being separated into it's own tab.   did you experience the same thing?   how did you fix it?   Thanks!

[nthumma]

Praveen, if i remove 'formModel._fields[f.name].isVisible()' from ng-show, I can see form fields on the form. 

Do you have any thoughts why formModel._fields[f.name].isVisible() is not working?

[praveenmuramal1]

use 

ng-show = "formModel._fields[f.name].visible"

formModel._fields is a json object with data retrieved about the form, with the information about its fields, field types, visibility, js functions if any etc., 

the value returned by function isVisible() is stored in the formModel json Object under the property "formModel._fields[f.name].visible"