{"id":24501,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/example-calculated-fields-1\/"},"modified":"2025-02-18T08:33:47","modified_gmt":"2025-02-18T16:33:47","slug":"example-calculated-fields-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/","title":{"rendered":"Example &#8211; Calculated Fields"},"content":{"rendered":"<p>This example shows how to provide two calculated fields on an <em>Add<\/em> or <em>Edit<\/em> screen layout. This could be achieved by using business rules, but this examples serves the purpose of showing alternative methods of achieving similar results. The key difference is that business rules are executed via an Ajax call back to the server, while the JavaScript approach downloads the code to the client browser where it is executed.<\/p>\n<p>The example involves two fields named <span class=\"fixedWidthFont\">VAL1<\/span> and <span class=\"fixedWidthFont\">VAL2<\/span>. Numeric data entered into these two fields will be summed and the result placed in a third field named <span class=\"fixedWidthFont\">VAL_SUM<\/span>, and the two fields will be multiplied and the result placed in a fourth field named <span class=\"fixedWidthFont\">VAL_PRODUCT<\/span>. All four fields have a display type of Number. To set up this requirement, take the following steps \u2013<\/p>\n<ul>\n<li>\n\t\tWithin the data dictionary, define the fields <span class=\"fixedWidthFont\">VAL1<\/span>, <span class=\"fixedWidthFont\">VAL2<\/span>, <span class=\"fixedWidthFont\">VAL_SUM<\/span> and <span class=\"fixedWidthFont\">VAL_PRODUCT<\/span>, all with a display type of Number<\/li>\n<li>\n\t\tMake sure you give these fields read and write permission<\/li>\n<li>\n\t\tPlace all the fields on an <em>Add<\/em> or <em>Edit<\/em> screen layout. Add an HTML modifier to the fields named <span class=\"fixedWidthFont\">VAL1<\/span> and <span class=\"fixedWidthFont\">VAL2<\/span>. The modifier value should be <span class=\"fixedWidthFont\">onchange=calc();<\/span><\/li>\n<li>\n\t\tPlace the following JavaScript functions within the UserJavaScript.js file. Note that the field names referenced in the layout have <b>p_<\/b> prefixed to their names. These are the parameter names of the fields<\/p>\n<pre class=\"code\">\r\nfunction valOf(which) {\r\n  if (! which) return 0;\r\n    var val = parseInt(which, 10);\r\n  if (isNaN(val)) return 0;\r\n    return val;\r\n}\r\n\r\nfunction calc() {\r\n  document.editForm.p_val_product.value =\r\n                    document.editForm.p_val1.value * \r\n                    document.editForm.p_val2.value;\r\n  var a = document.editForm.p_val1.valueOf;\r\n  document.editForm.p_val_sum.value =\r\n                    valOf(document.editForm.p_val1.value) + \r\n                    valOf(document.editForm.p_val2.value);\r\n  return;\r\n}<\/pre>\n<\/li>\n<li>\n\t\tWhen the user changes either the field named <span class=\"fixedWidthFont\">VAL1<\/span> or <span class=\"fixedWidthFont\">VAL2<\/span>, the JavaScript function is triggered, and the results are immediately displayed in <span class=\"fixedWidthFont\">VAL_SUM<\/span> and <span class=\"fixedWidthFont\">VAL_PRODUCT<\/span>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This example shows how to provide two calculated fields on an Add or Edit screen layout. This could be achieved by using business rules, but this examples serves the purpose of showing alternative methods of achieving similar results. The key difference is that business rules are executed via an Ajax call back to the server,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":24483,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-24501","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Example - Calculated Fields - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Example - Calculated Fields - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"This example shows how to provide two calculated fields on an Add or Edit screen layout. This could be achieved by using business rules, but this examples serves the purpose of showing alternative methods of achieving similar results. The key difference is that business rules are executed via an Ajax call back to the server,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-18T16:33:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/\",\"name\":\"Example - Calculated Fields - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-02-18T16:33:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ExtraView 25\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"User Custom Guide\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"JavaScript Interface\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Example &#8211; Calculated Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Example - Calculated Fields - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/","og_locale":"en_US","og_type":"article","og_title":"Example - Calculated Fields - Product Documentation","og_description":"This example shows how to provide two calculated fields on an Add or Edit screen layout. This could be achieved by using business rules, but this examples serves the purpose of showing alternative methods of achieving similar results. The key difference is that business rules are executed via an Ajax call back to the server,...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-02-18T16:33:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/","name":"Example - Calculated Fields - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-02-18T16:33:47+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-calculated-fields-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"ExtraView 25","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":3,"name":"User Custom Guide","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/"},{"@type":"ListItem","position":4,"name":"JavaScript Interface","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/"},{"@type":"ListItem","position":5,"name":"Example &#8211; Calculated Fields"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=24501"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24501\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24483"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=24501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}