With the custom code control, add automatic numbering display function to each row in the sub-list on the approval form. This feature will enable users to locate data information for each row with ease.
Step 1: Add a Sub List control
From the Approval form designer, add a Sub List control to the form. Edit the sub list's field ID and field name as you need. For the example below, the Field ID is set to "DetailsList" and the Field Name is set to "Purchase Details List":
Then, from the List Content settings group, click the "settings" button of Fields to open the List Fields Settings window. Add a Text type field, set the Field ID as "field_NO", the Field Name can be set as "NO". Click the checkbox of this field and set the Sort number as "1". This will ensure that this field will show on the Sub List as the first column.
Next, expand the NO field settings panel, and set the column width of Table View to 50px.
Click the "Settings" button of the Control properties to open the Text Box control settings window. Expand the Validation group, and toggle on the Readonly setting.
Step 2: Add a Custom code control
Find the "Custom Code" control from the Advanced group, drag to add on your form.
From the content settings panel, paste the following code script to the text area:
codeInModules=function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=15)}({0:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MODULE_COMMON="common",e.MODULE_REQUEST="request",e.MODULE_MOMENT="moment",e.MODULE_BIZCHARTS="bizcharts",e.TEMP_VAR_PREFIX="__temp_",e.FILTER_VAR_PREFIX="__filter_",e.LIST_ROW_DELETE="_del"},1:function(t,e){t.exports=React},15:function(t,e,r){"use strict";var n,o=this&&this.__extends||(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])},function(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}),i=this&&this.__read||function(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,o,i=r.call(t),u=[];try{for(;(void 0===e||e-- >0)&&!(n=i.next()).done;)u.push(n.value)}catch(t){o={error:t}}finally{try{n&&!n.done&&(r=i.return)&&r.call(i)}finally{if(o)throw o.error}}return u},u=this&&this.__spread||function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(i(arguments[e]));return t};Object.defineProperty(e,"__esModule",{value:!0});var c=r(1),a=r(0),s=function(){function t(){}return t.prototype.description=function(){return"Fill in sequence number in first column of a Sub List"},t.prototype.inputParameters=function(){return[{id:"listId",type:"string",desc:"Varaible ID of the Sub List, use to monitor the change of the list."},{id:"snField",type:"string",desc:"Field ID of Sub List to store sequence number."}]},t.prototype.requiredFields=function(t){return[t.listId]},t.prototype.render=function(t,e,r){return c.createElement(l,{data:e[t.params.listId],context:t,readonly:r})},t}();e.CodeInApplication=s;var l=function(t){function e(e,r){var n=t.call(this,e,r)||this;return console.log("Init addSeqNoToSubList..."),n.process(e),n}return o(e,t),e.prototype.process=function(t){var e=t.context,r=t.readonly,n=t.data;if(!r&&n&&n.length){var o=e.params,i=1,c=!1;n.forEach((function(t,r){t&&!t[a.LIST_ROW_DELETE]&&(e.setFieldValue(o.listId+"["+r+"]."+o.snField,i++),c=!0)})),c&&(this.cache=u(n),e.setFieldValue(o.listId,this.cache))}},e.prototype.componentWillReceiveProps=function(t){"data"in t&&t.data!==this.props.data&&t.data!==this.cache&&this.process(t)},e.prototype.render=function(){return null},e}(c.Component);e.ListChangeComp=l}});
Then from the following "Input parameters" section, set the listId and snField parameters:
listId is the Field ID of the associated sub-list, set the value as "DetailsList"
snField is the Field ID for displaying the incremented number column, set it to "field_NO".
Step 3: Preview and verify
Once all set, you can click the "Preview" button from the form designer to check the result. When you add new items, the first column will display the numbering of this row.
You can publish to make it available to end users.