{"id":1148,"date":"2023-10-31T14:07:26","date_gmt":"2023-10-31T06:07:26","guid":{"rendered":"https:\/\/www.tonghin.com.my\/blog\/?p=1148"},"modified":"2023-10-31T14:07:28","modified_gmt":"2023-10-31T06:07:28","slug":"creation-of-ui-page-and-api-integration-for-cleanup-process","status":"publish","type":"post","link":"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/","title":{"rendered":"Creation of UI page and API Integration for CleanUp Process"},"content":{"rendered":"\n<p>Last week, my focus was on constructing the UI page for the cleanup process. I adhered to the previous design with minimal changes, removing unnecessary elements and incorporating new ones like checkboxes and buttons. Simultaneously, while working on the UI pages, I started developing the view model. During this process, I realized the necessity for a new API query to facilitate the cleanup procedure. Upon receiving confirmation from Mr. Peter, I proceeded to construct the API query.<\/p>\n\n\n\n<p>During the query development, I encountered a confusion in combining lists from two different entities. After pondering for a while, I figured that the solution was surprisingly straightforward. Utilizing AutoMapper to map the data into a single DTO, the next task was simply to add it to a list separately using the AddRange method. The query also took future pagination into account. However, if the page size was set to lower than 0, the query would disregard the pagination option. After establishing the logic and handler, I thoroughly tested the query until it functioned flawlessly.<\/p>\n\n\n\n<p>Following this, I continued developing the view model, ensuring that UI functionalities like the search bar, buttons, and checkboxes worked seamlessly. In the initial stages of UI development, I created an event parameter, considering its potential use later. However, as I realized that the UI primarily required one mode, I removed the parameter and only used the event for the loading bar dialog, triggered when retrieving data. Towards the end of the week, I successfully completed the UI. Nevertheless, further testing is needed to ensure both the UI and backend code are error-free and functioning perfectly for the cleanup process.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week, my focus was on constructing the UI page for the cleanup process. I adhered to the previous design with minimal changes, removing unnecessary elements and incorporating new ones like checkboxes and buttons. Simultaneously, while working on the UI pages, I started developing the view model. During this process, I realized the necessity for &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Creation of UI page and API Integration for CleanUp Process&#8221;<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creation of UI page and API Integration for CleanUp Process | Tong Hin&#039;s Blog<\/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:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creation of UI page and API Integration for CleanUp Process | Tong Hin&#039;s Blog\" \/>\n<meta property=\"og:description\" content=\"Last week, my focus was on constructing the UI page for the cleanup process. I adhered to the previous design with minimal changes, removing unnecessary elements and incorporating new ones like checkboxes and buttons. Simultaneously, while working on the UI pages, I started developing the view model. During this process, I realized the necessity for &hellip; Continue reading &quot;Creation of UI page and API Integration for CleanUp Process&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\" \/>\n<meta property=\"og:site_name\" content=\"Tong Hin&#039;s Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-31T06:07:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-31T06:07:28+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\":\"Organization\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\",\"name\":\"TONG HIN MACHINERY\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"sameAs\":[\"https:\/\/www.youtube.com\/channel\/UC60EoxJMNbu8mV0LuEGfrBg\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/wp-content\/uploads\/2020\/10\/web_logo_180_180.jpg\",\"width\":180,\"height\":180,\"caption\":\"TONG HIN MACHINERY\"},\"image\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Tong Hin&#039;s Blog\",\"description\":\"Sharing About Technology\",\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.tonghin.com.my\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#webpage\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\",\"name\":\"Creation of UI page and API Integration for CleanUp Process | Tong Hin&#039;s Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\"},\"datePublished\":\"2023-10-31T06:07:26+00:00\",\"dateModified\":\"2023-10-31T06:07:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/\",\"name\":\"Creation of UI page and API Integration for CleanUp Process\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/81e2366362d8d14b15519395755cee6f\"},\"headline\":\"Creation of UI page and API Integration for CleanUp Process\",\"datePublished\":\"2023-10-31T06:07:26+00:00\",\"dateModified\":\"2023-10-31T06:07:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"articleSection\":\"Experiential\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tonghin.com.my\/blog\/2023\/10\/31\/creation-of-ui-page-and-api-integration-for-cleanup-process\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/81e2366362d8d14b15519395755cee6f\",\"name\":\"nurlailiyuzi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5c0d4cc6f7fc881bd56d95bdbb0c4c14?s=96&d=mm&r=g\",\"caption\":\"nurlailiyuzi\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1148"}],"collection":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/comments?post=1148"}],"version-history":[{"count":3,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1148\/revisions"}],"predecessor-version":[{"id":1153,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1148\/revisions\/1153"}],"wp:attachment":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/media?parent=1148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/categories?post=1148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/tags?post=1148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}