Hide Service Portal 'Submit' button based on Form condition.

Wesley Breshear · ‎10-06-2017

Hello,

Hopefully, this is an easy question. I am still learning JavaScript and have no experience with AngularJS. Anyway, I am trying to hide the 'Submit' button on a form within Service Portal. Basically, the response on a specific question will determine if the user should be filling out a different form or not. If true, then they are given a widget pop-up window with a hyperlink to the form that should be using. This appears based on a UI Policy and makes the remaining fields on the form Read Only, however, the user is still able to submit the request. I haven't been able to find a way to hide or make read only the 'Submit' button in the Service Portal. I have found how to via CMS but not Service Portal. There is similar request to hide the button on the Service Portal from but the button is hidden based catalog item and it appears to use AngularJS. I can't figure out how to modify the code and then hide based on a condition. I am not even sure if I can hide it with the Widget that I am calling by UI Policy or if I should be using a completely different process/method. Could you help with the method and code that I should be using?

Request Form:

Widget: (see attached for larger copy)

UI Policy:

Thank you,

-Wesley

chirag_bagdai · ‎10-06-2017

Hi Wesley,

There are couple of options which you can try :

Clone OOB "SC Catalog item" widget and add your custom validation for "Submit" button.
Add onSubmit Catalog client script and you can give alert message and using "return false" statement. User will not be able to submit the request.

3. Declare below function in your custom widget (software development tool)

and call this function from UI policy whenever you want to hide. Note : you can add another function for show.

View solution in original post

chirag_bagdai · ‎10-06-2017

Can you give alert in true and false condition to see which one is actually executing.

Wesley Breshear · ‎10-06-2017

Hi Chirag,

I confirmed with an Alert message, at the beginning of the function, everything works as expected, but when I place the Alert after the hideSubmitBtn(); the message breaks (does not display). So I assuming the function is crashing on the hideSubmitBtn(); Any ideas?

function onCondition() {

//alert('Hide Button');

hideSubmitBtn();

alert('Hide Button');

}

-Wesley

chirag_bagdai · ‎10-06-2017

Hi Wesley,

Yes because looks like the function/weight is not loaded when you are calling the function.

Make sure that when your ui policy gets execute, the widget where the function is declared should be there in page before the function call.

Can you try with onChange Client Script? Or Can you call this function from your browser developer tool console ?

Wesley Breshear · ‎10-18-2017

Hi Chirag,

Okay finally figured out what needed to occur/change with my setup. I updated widget code and then from a UI Policy called 'hideSubmitBtn()' and 'showSubmitBtn()' when the condition is true or false. Thanks with the direction. So now my issue is when the Submit button is hidden the bottom looks cut off. Do you know of a way of adding or replacing a padding element (or other solution) when the angular.element is hidden?

function hideSubmitBtn() {

angular.element('button[name="submit"]').hide();

}

Here is link that resolved the issue, but I am not able to get <div style="padding:1em 0"> solution to go where the button is being hidden.

Hide submit button for specific catalog item on portal

_____________________________________________________________________________________________

Solution

Widget HTML:

<body>

<font>You are using the incorrect form. Please click </font><a href="https://[InstanceName]/sp/?id=sc_cat_item&sys_id=2bcb555f0f708700b855f08ce1050ef9">

<b><font color="Blue">here</font></b></a><font> to be redirected to the right form.</font>

</div>

</div>

</body>

function hideSubmitBtn() {

angular.element('button[name="submit"]').hide();

}

function showSubmitBtn() {

angular.element('button[name="submit"]').show();

}

</script>

UI Policy:

Thank you,

-Wesley

Wesley Breshear · ‎10-24-2017

Hi Chirag,

Okay finally figured out what needed to occur/change with my setup. I updated widget code and then from a UI Policy called 'hideSubmitBtn()' and 'showSubmitBtn()' when the condition is true or false. Thanks with the direction. So now my issue is when the Submit button is hidden the bottom looks cut off. Do you know of a way of adding or replacing a padding element (or other solution) when the angular.element is hidden?

function hideSubmitBtn() {

angular.element('button[name="submit"]').hide();

}

Here is the link that resolved the issue, but I am not able to get <div style="padding:1em 0"> solution to go where the button is being hidden.

Hide submit button for specific catalog item on portal