{"id":39299,"date":"2022-02-24T09:22:38","date_gmt":"2022-02-24T09:22:38","guid":{"rendered":"https:\/\/arquiconsult.com\/?p=39299"},"modified":"2024-10-23T13:51:35","modified_gmt":"2024-10-23T12:51:35","slug":"016-how-to-create-a-control-add-in-in-al","status":"publish","type":"post","link":"https:\/\/arquiconsult.com\/es\/016-how-to-create-a-control-add-in-in-al\/","title":{"rendered":"#016 HOW TO CREATE A CONTROL ADD-IN IN AL"},"content":{"rendered":"<div class=\"services_vertical horizontal_services row\" style=\"background-color: #f7f7f7; padding: 25px; border-radius: 5px; text-align: justify;\">\n<p>A Control Add-In is a custom control or a visual element to display and modify data in a page. With a Control Add-In we can display a web page, visualize data or a map and exchange data with Business Central.<\/p>\n<p>To build a Control Add-in in C\/AL a C# dll was required to interop Dynamics NAV with Javascript.<\/p>\n<p>Now the dll is not required because there is a Control Add-In object making the process simpler to develop.<\/p>\n<\/div>\n<p><strong><br \/>\nControl Add-In Object Properties:<\/strong><\/p>\n<ul>\n<li><u>Scripts<\/u> \u2013 The scripts can be local files on our project, or they can refer to external files using HTTP or HTTPS protocol.<\/li>\n<li><u>StartupScript<\/u> \u2013 We can call a special script that runs when the add-in is loaded. Scripts and StartupScript initialize the Control Add-In. See also the <a href=\"https:\/\/docs.microsoft.com\/en-us\/dynamics365\/business-central\/dev-itpro\/developer\/properties\/devenv-recreatescript-property\" target=\"_blank\" rel=\"noopener\">RecreateScript<\/a> and <a href=\"https:\/\/docs.microsoft.com\/en-us\/dynamics365\/business-central\/dev-itpro\/developer\/properties\/devenv-refreshscript-property\" target=\"_blank\" rel=\"noopener\">RefreshScript<\/a> properties.<\/li>\n<li><u>Images<\/u> \u2013 External resources such as pictures or even files.<\/li>\n<li><u>Stylesheets<\/u> \u2013 With Stylesheets we can give additional styling to the Control Add-In.<\/li>\n<\/ul>\n<p><strong>Control Add-In Styling Properties:<\/strong><\/p>\n<ul>\n<li><u>HorizontalShrink<\/u><\/li>\n<li>HorizontalStretch<\/li>\n<li>MinimumHeight<\/li>\n<li>MinimumWidth<\/li>\n<li>MaximumHeight<\/li>\n<li>MaximumWidth<\/li>\n<li>RequestedHeight<\/li>\n<li>RequestedWidth<\/li>\n<li>VerticalShrink<\/li>\n<li>VerticalStretch<\/li>\n<\/ul>\n<p>Let\u2019s see how we can build a simple Control Add-In.<\/p>\n<p><strong>Step 1: Create the Control Add-In object<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-39275 aligncenter\" src=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-1-Create-the-Control-Add-In-object-640x452.png\" alt=\"Step 1 Create the Control Add-In object\" width=\"640\" height=\"452\" srcset=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-1-Create-the-Control-Add-In-object-640x452.png 640w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-1-Create-the-Control-Add-In-object-768x542.png 768w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-1-Create-the-Control-Add-In-object.png 892w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"-\"><\/p>\n<p><strong>Step 2: Create a CardPart Page with the Control Add-In<\/strong><\/p>\n<p><img loading=\"lazy\" class=\" wp-image-39281 aligncenter\" src=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-2-Create-a-CardPart-Page-with-the-Control-Add-In-586x480.png\" alt=\"Step 2 Create a CardPart Page with the Control Add-In\" width=\"642\" height=\"525\" srcset=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-2-Create-a-CardPart-Page-with-the-Control-Add-In-586x480.png 586w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-2-Create-a-CardPart-Page-with-the-Control-Add-In-768x629.png 768w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-2-Create-a-CardPart-Page-with-the-Control-Add-In.png 840w\" sizes=\"(max-width: 642px) 100vw, 642px\" title=\"-\"><\/p>\n<p><strong>Step 3: Add the CardPart Page to the Customer Card Page<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-39284 aligncenter\" src=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-3-Add-the-CardPart-Page-to-the-Customer-Card-Page-640x344.png\" alt=\"Step 3 Add the CardPart Page to the Customer Card Page\" width=\"640\" height=\"344\" srcset=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-3-Add-the-CardPart-Page-to-the-Customer-Card-Page-640x344.png 640w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-3-Add-the-CardPart-Page-to-the-Customer-Card-Page-768x413.png 768w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-3-Add-the-CardPart-Page-to-the-Customer-Card-Page.png 1038w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"-\"><\/p>\n<p><strong>Step 4: Run the Page &amp; view the results<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-39278 aligncenter\" src=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-4-Run-the-Page-view-the-results-640x303.png\" alt=\"Step 4 Run the Page &amp; view the results\" width=\"640\" height=\"303\" srcset=\"https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-4-Run-the-Page-view-the-results-640x303.png 640w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-4-Run-the-Page-view-the-results-768x363.png 768w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-4-Run-the-Page-view-the-results-1536x726.png 1536w, https:\/\/arquiconsult.com\/wp-content\/uploads\/2022\/02\/Step-4-Run-the-Page-view-the-results.png 1916w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"-\"><\/p>\n<p>We can see a blue rectangle that we have previously defined.<\/p>\n<div class=\"services_vertical horizontal_services row\" style=\"background-color: #f7f7f7; padding: 25px; border-radius: 5px; text-align: justify;\">\n<p>Official documentation from Microsoft is available <a href=\"https:\/\/docs.microsoft.com\/en-us\/dynamics365\/business-central\/dev-itpro\/developer\/devenv-control-addin-object\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<!--themify_builder_content-->\n<div id=\"themify_builder_content-39299\" data-postid=\"39299\" class=\"themify_builder_content themify_builder_content-39299 themify_builder tf_clear\">\n    \t<!-- module_row -->\n\t<div  data-lazy=\"1\" class=\"module_row themify_builder_row tb_nus1581 tb_first tf_clearfix\">\n\t    \t\t<div class=\"row_inner col_align_top col-count-1 tf_box tf_w tf_rel\">\n\t\t\t<div  data-lazy=\"1\" class=\"module_column tb-column col-full first tb_cai8581 tf_box\">\n\t\t\t    \t        <div class=\"tb-column-inner tf_box tf_w\">\n\t\t    <!-- module text -->\n<div  class=\"module module-text tb_9tkr581 arquitps-data  \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n    <p><script>\njQuery(\".tbp_post_month:contains(Janeiro)\").html(\"January\");\n\njQuery(\".tbp_post_month:contains(Fevereiro)\").html(\"February\");\n\n\njQuery(\".tbp_post_month:contains(Mar\u00e7o)\").html(\"March\");\n\n\njQuery(\".tbp_post_month:contains(Abril)\").html(\"April\");\n\n\njQuery(\".tbp_post_month:contains(Maio)\").html(\"May\");\n\n\njQuery(\".tbp_post_month:contains(Junho)\").html(\"June\");\n\n\njQuery(\".tbp_post_month:contains(Julho)\").html(\"July\");\n\njQuery(\".tbp_post_month:contains(Agosto)\").html(\"August\");\n\njQuery(\".tbp_post_month:contains(Setembro)\").html(\"September\");\n\njQuery(\".tbp_post_month:contains(Outubro)\").html(\"October\");\n\njQuery(\".tbp_post_month:contains(Novembro)\").html(\"November\");\n\njQuery(\".tbp_post_month:contains(Dezembro)\").html(\"December\");\t\n\n\n\n<\/script><\/p>    <\/div>\n<\/div>\n<!-- \/module text -->\t        <\/div>\n\t    \t<\/div>\n\t\t    <\/div>\n\t    <!-- \/row_inner -->\n\t<\/div>\n\t<!-- \/module_row -->\n\t\t<!-- module_row -->\n\t<div  data-anchor=\"sucesso\" data-hide-anchor=\"1\" data-lazy=\"1\" class=\"module_row themify_builder_row sucesso repeat tb_has_section tb_section-sucesso tb_v94j339 tf_clearfix\" >\n\t    \t\t<div class=\"row_inner col_align_top col-count-1 tf_box tf_w tf_rel\">\n\t\t\t<div  data-lazy=\"1\" class=\"module_column tb-column col-full first tb_n4m1339 tf_box\">\n\t\t\t    \t        <div class=\"tb-column-inner tf_box tf_w\">\n\t\t    <!-- module buttons -->\n<div  class=\"module module-buttons tb_hj2c339 buttons-horizontal transparent popmake-24705 large circle tf_textc\" data-lazy=\"1\">\n    \t<div class=\"module-buttons-item tf_inline_b\">\n\t\t\t\t\t\t\t<a href=\"#\" class=\"ui builder_button tb_default_color\" >\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"tf_inline_b tf_vmiddle\">Give as a Feedback and Suggest Questions<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t    \t<\/div>\n\t<\/div>\n<!-- \/module buttons -->\n\t        <\/div>\n\t    \t<\/div>\n\t\t    <\/div>\n\t    <!-- \/row_inner -->\n\t<\/div>\n\t<!-- \/module_row -->\n\t<\/div>\n<!--\/themify_builder_content-->\n","protected":false},"excerpt":{"rendered":"<p>A Control Add-In is a custom control or a visual element to display and modify data in a page. With a Control Add-In we can display a web page, visualize data or a map and exchange data with Business Central. To build a Control Add-in in C\/AL a C# dll was required to interop Dynamics [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":39352,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2065],"tags":[2087,2088,2219,137],"acf":[],"_links":{"self":[{"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/posts\/39299"}],"collection":[{"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/comments?post=39299"}],"version-history":[{"count":0,"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/posts\/39299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/media\/39352"}],"wp:attachment":[{"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/media?parent=39299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/categories?post=39299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arquiconsult.com\/es\/wp-json\/wp\/v2\/tags?post=39299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}