Hackathon Question Approach!!

[SandeepKSingh]

In Service Portal, you need to create a custom widget that:

• Shows data from a GlideRecord query with dynamic filters based on the logged-in user.

• Allows inline editing of records directly in the portal (without page refresh).

• Must validate fields on the client side before saving.

• Should work on both desktop and mobile.

How will you design it?

[Ravi Gaurav · Accepted solution]

Hi @SandeepKSingh 

I can suggest you with below info 

• Widget Structure:

  • Server Script → GlideRecord query, filter by gs.getUserID().

  • Client Controller (AngularJS) → fetch data using spUtil.get() or $http.post.

  • Template (HTML) → display results in table/list with ng-repeat.

• Inline Editing:

  • Use ng-model bindings for fields.

  • On change → call custom widget server script via $sp.saveRecord() or $http.post to update record.

• Validation:

  • AngularJS form validation (e.g., ng-required, regex).

  • If invalid → block update + show error toast.

• Mobile Friendly:

  • Use Bootstrap grid (col-xs-*, col-sm-*) + Service Portal CSS.

  • Avoid fixed widths, test with responsive preview.

 summary: Server script gets user data → Client controller binds → HTML for display/edit → Inline update with $http.post → Angular validation → Responsive Bootstrap for mobile.

[Ravi Gaurav · Accepted solution]

Hi @SandeepKSingh 

I can suggest you with below info 

• Widget Structure:

  • Server Script → GlideRecord query, filter by gs.getUserID().

  • Client Controller (AngularJS) → fetch data using spUtil.get() or $http.post.

  • Template (HTML) → display results in table/list with ng-repeat.

• Inline Editing:

  • Use ng-model bindings for fields.

  • On change → call custom widget server script via $sp.saveRecord() or $http.post to update record.

• Validation:

  • AngularJS form validation (e.g., ng-required, regex).

  • If invalid → block update + show error toast.

• Mobile Friendly:

  • Use Bootstrap grid (col-xs-*, col-sm-*) + Service Portal CSS.

  • Avoid fixed widths, test with responsive preview.

 summary: Server script gets user data → Client controller binds → HTML for display/edit → Inline update with $http.post → Angular validation → Responsive Bootstrap for mobile.

[Ravi Gaurav · Accepted solution]

You can follow the ServiceNow 

https://www.servicenow.com/docs/bundle/zurich-platform-user-interface/page/build/service-portal/conc...

https://github.com/platform-experience/serviceportal-widget-library

[SandeepKSingh]

Thanks for all the Help you are doing for the community 🙂