{"id":2131,"date":"2018-02-19T07:23:03","date_gmt":"2018-02-19T07:23:03","guid":{"rendered":"https:\/\/www.enprowess.com\/blogs\/?p=2131"},"modified":"2018-08-29T03:27:04","modified_gmt":"2018-08-29T03:27:04","slug":"alfresco-adf-component","status":"publish","type":"post","link":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/","title":{"rendered":"Getting Started with Alfresco ADF Component"},"content":{"rendered":"<p>ADF framework is based on an angular framework and in angular applications, everything is built as ADF component like a\u00a0dashlet\u00a0or a page or sections of a page etc. There are in-built ready to use components are available like Card View component, Content Action component and DataTable component etc. You can create your custom ADF component which may use these inbuilt components or your custom ADF components or services, Let&#8217;s get started with how to create a custom component in ADF.<\/p>\n<p>&nbsp;<\/p>\n<h3>Pre-requisite:<\/h3>\n<p>1)\u00a0Install Alfresco 5.2, APS 1.9, ADF 1.9, nodeJS\u00a08.6.0 and angular 4<\/p>\n<p>2)\u00a0Execute these commands to create an alfresco app:\u00a0npm\u00a0install yo,\u00a0npm\u00a0install\u00a0generator-ng2-alfresco-app<\/p>\n<p>3)\u00a0Create an ADF APP using command: yo ng2-alfresco-app\u00a0student-management<\/p>\n<p>4)\u00a0This\u00a0command\u00a0is like a wizard in which you need to answer questions related to your application.<\/p>\n<p>&nbsp;<\/p>\n<p>Let\u2019s create a component which takes input student details and calls alfresco REST api using http request to store details in alfresco repository.<\/p>\n<h3>Steps to create a component:<\/h3>\n<p>&nbsp;<\/p>\n<h4><strong>1)<\/strong>\u00a0Introduction of files\/folder required\u00a0for\u00a0a\u00a0component:<\/h4>\n<p><img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-1.png\" alt=\"ADF component\" \/><br \/>\n<em>1.0 files\/folder required for a component<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><strong>1.1) HTML file:<\/strong> This is the template file of our custom ADF component. This file is optional.<\/p>\n<p><strong>1.2) SCSS file: <\/strong>This is the scss style file of our custom ADF component. This file is optional. There could be 0 or many scss files for define the \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 style for our html elements.<\/p>\n<p><strong>1.3) Spec file: <\/strong>This is used for testing purpose only.<\/p>\n<p><strong>1.4) Typescript file:<\/strong><\/p>\n<p>Superset\u00a0of\u00a0JavaScript\u00a0like classes, interface or types.\u00a0Allows writing robust code because it first compiled and converted into\u00a0JavaScript\u00a0and then the\u00a0JavaScript\u00a0file\u00a0executes.\u00a0We mostly don&#8217;t specify any data type of a data member because of angular sets data type of data members at\u00a0run-time, it reduces the\u00a0possibilities\u00a0of type cast exception at\u00a0run-time.\u00a0By default the typescript file contains following details:<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-1.1.png\" alt=\"ADF Component\" \/><br \/>\n<em>1.4<\/em><em> Define a custom ADF Component<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>In a typescript, we can define a component as shown in the above image.<\/p>\n<p>At\u00a0<strong>line 1:<\/strong>\u00a0we are importing Component and OnInit decorators from @angular\/core module available inside your\u00a0node_modules folder.<\/p>\n<p>At\u00a0<strong>line 3:<\/strong>\u00a0the @Component decorator specifies that the class defined at line 9 is not just a regular class it is a component which\u00a0has some metadata attributes which describes how the component should behave at run-time.<\/p>\n<p>At\u00a0<strong>line 4:<\/strong>\u00a0Selector:\u00a0selector is a unique string value across the whole application. Using the selector value we can call this component\u00a0from a template file otherwise we need to call this component using a route URL. The selector is\u00a0CSS\u00a0selector that identifies this component in a template\u00a0following are the possible values for selector:<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-1.4.png\" alt=\"ADF Component\" \/><br \/>\n<em>1.4<\/em><em> table of values of selector in a .ts file<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>At<strong>\u00a0line 5:<\/strong>\u00a0There are two attributes to define our template view, shown as follow:<\/p>\n<p>templateUrl:\u00a0Define an external template file path for the view of this component.<\/p>\n<p>temple:\u00a0Define\u00a0an inline\u00a0template for the view\u00a0of this component. If it is only a single line then enclose with \u2018\u2019\u00a0else \u00a0\u00a0\u00a0\u00a0\u00a0 enclose your template code using &#8220;.<\/p>\n<p>&nbsp;<\/p>\n<p>At\u00a0<strong>line 6:<\/strong>\u00a0\u00a0There are two attributes to define our styles, shown as follow:<\/p>\n<p>styleUrls:\u00a0define list\u00a0url\u00a0of stylesheet\u00a0files used for this component\u2019s view comma separated.<\/p>\n<p>styles:\u00a0define inline\u00a0css\u00a0for this components view\u00a0in this attribute using &#8220; symbol.<\/p>\n<p>&nbsp;<\/p>\n<p>At <strong>line 7:<\/strong>\u00a0define a class for this component:<\/p>\n<p>Once the @component decorator is defined then you can define a class based on their scope(import \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 or\u00a0export).\u00a0The class has a constructor, data members and other methods like: referenced in html or methods\u00a0of \u00a0\u00a0\u00a0\u00a0 imported class.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>2)\u00a0<\/strong>Create component:<\/h4>\n<p>There are 2 ways to create a component. manual or using the command.<\/p>\n<p><strong>2.1)<\/strong>\u00a0Manually:<\/p>\n<p>First, you need to create a file\/folder structure as shown in image 1.1. After that based on your requirement put data into\u00a0HTML, CSS or spec file and in typescript file, you must declare a component as shown in the image 1.4.<\/p>\n<p><strong>2.2)<\/strong>\u00a0Using the command:<\/p>\n<p>Go to your ADF app directory and write the following command in CMD:<\/p>\n<p>ng g c COMPONENT_NAME<\/p>\n<p>ng -&gt; stands for angular. All the directives build using angular are prefixed with \u2018ng\u2019.<\/p>\n<p>g -&gt; stands for generate or create component<\/p>\n<p>c -&gt; stands for component create a new component inside your adf app directory.<\/p>\n<p>COMPONENT_NAME: will create a folder of COMPONENT_NAME and some required files like ts, HTML, Spec and CSS files for your\u00a0component with some inbuilt data.<\/p>\n<p><em>for example: \u00a0ng g c studentDetails<\/em><\/p>\n<p><strong>Note:<\/strong> The only difference between these two approaches is when you create a component using cmd prompt then along with files creation it will also creates a component in side ts file. which can be used directly but when you create a component manually then you need to create a component inside ts file.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>3) <\/strong>Import component to a module:<\/h4>\n<p>A custom ADF component can be called from other components if it is part of any module of your application. For this example I\u2019m importing the studentDetails component in \u201capp module\u201d. let\u2019s register our custom ADF component:<\/p>\n<p><strong>3.1)<\/strong> adf-app\\src\\app\\app.module.ts: in the above import section import your custom ADF component shown as follows:<br \/>\nimport { StudentdetailsComponent } from &#8216;.\/studentdetails\/studentdetails.component&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>3.2)<\/strong> Then inside @NgModule decorator attributes are like:<\/p>\n<p><strong>declarations:<\/strong> must add your custom class name to your component by comma separated\u00a0in this array.<\/p>\n<p><strong>imports:<\/strong> if you want that this component must be available where ever your app module is used, then only specify your \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 component inside this array as well.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>4) <\/strong>Call alfresco REST api using http:<\/h4>\n<p>Alfresco DF can fetch data from alfresco repository using RESTAPI, let\u2019s call a people webscript to create user in alfresco repository from our custom ADF component.<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-4-1.png\" alt=\"ADF Component\" \/><br \/>\n<em>4.0 Call repository webscript<\/em><\/p>\n<p>The above screenshot shows one of the way to call the repository webscript from alfresco custom ADF component using http request to alfresco repository (There are other ways also to call alfresco repository webscript like: alfrescoJSapi ). Define a httpUrl that you want to call, set the type(get, post, put, or delete) of the webscript, and pass arguments according to that. For this example I\u2019m calling the repository webscript of people which will create a user in alfresco repository.<\/p>\n<p><strong>Note:<\/strong><\/p>\n<p>idle you should create a service which will call repository web scripts and our components will call the service, but this blog is meant to be focused on custom ADF components in angular so therefore I\u2019m call repository webscript.<\/p>\n<p>&nbsp;<\/p>\n<p>Following are the template and stylesheet files for our student details component:<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-4-2.png\" alt=\"ADF Component\" \/><\/p>\n<p><img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-4-3.png\" alt=\"ADF Component\" \/><\/p>\n<h4><strong>5) <\/strong>How to use our custom ADF component:<\/h4>\n<p><strong>\u00a0\u00a0\u00a0\u00a05.1)<\/strong>Use custom ADF component:<\/p>\n<p>Let\u2019s call the \u201capp-studentdetails\u201d selector in our app.html file at location projectDirectory\/src\/app\/app.component.html<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-5.png\" alt=\"ADF Component\" \/><br \/>\n<em>5.1 Use custom ADF component<\/em><\/p>\n<p><strong>Note: <\/strong>There are other ways also to call our custom ADF component like call using url or give input to your component.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>6)<\/strong> Execute the component:<\/h4>\n<p>Now let\u2019s start the server by executing following command:<br \/>\nnpm start<\/p>\n<p>It will automatically open a new tab in google chrome with the address something like: \u201clocalhost:4200\u201d and shows the following output.<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-6-1.png\" alt=\"ADF Component\" \/><br \/>\nServer started and by default it is on app.html file inside which we have added our component. Let\u2019s add student details shown as following:<br \/>\n<img class=\"img-responsive\" src=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/introADF-6-2.png\" alt=\"ADF Component\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Summary:<\/strong><\/p>\n<p>This blog shows a basic idea of how to create a component in alfresco ADF. This blog is intended for beginners of ADF to get started with custom ADF Components.<\/p>\n<p>Post By,<br \/>\nKhushbu Watwani<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ADF framework is based on an angular framework and in angular applications, everything is built as ADF component like a\u00a0dashlet\u00a0or a page or sections of a page etc. There are in-built ready to use components are available like Card View component, Content Action component and DataTable component etc. You can create your custom ADF component&hellip; <a class=\"more-link\" href=\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/\">Continue reading <span class=\"screen-reader-text\">Getting Started with Alfresco ADF Component<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[13],"tags":[96,95,14,97],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Getting Started with Alfresco ADF Component - EnProwess Blog<\/title>\n<meta name=\"description\" content=\"Want to learn Alfresco ADF component, this Enprowess blog is about detailed development steps for developing custom ADF component\" \/>\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.enprowess.com\/blogs\/alfresco-adf-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Alfresco ADF Component\" \/>\n<meta property=\"og:description\" content=\"Want to learn Alfresco ADF component, this blog is about detailed development steps for developing custom ADF component\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/\" \/>\n<meta property=\"og:site_name\" content=\"EnProwess Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-19T07:23:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-08-29T03:27:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/alfresco-banner-ADF.png\" \/>\n\t<meta property=\"og:image:width\" content=\"786\" \/>\n\t<meta property=\"og:image:height\" content=\"310\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:title\" content=\"Getting Started with Alfresco ADF Component\" \/>\n<meta name=\"twitter:description\" content=\"Want to learn Alfresco ADF component, this blog is about detailed development steps for developing custom ADF component\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/alfresco-banner-ADF.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#organization\",\"name\":\"EnProwess\",\"url\":\"https:\/\/www.enprowess.com\/blogs\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2021\/07\/enprowess_logo.jpg\",\"contentUrl\":\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2021\/07\/enprowess_logo.jpg\",\"width\":1057,\"height\":697,\"caption\":\"EnProwess\"},\"image\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#website\",\"url\":\"https:\/\/www.enprowess.com\/blogs\/\",\"name\":\"EnProwess Blog\",\"description\":\"Your Enterprise solution partner\",\"publisher\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.enprowess.com\/blogs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#webpage\",\"url\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/\",\"name\":\"Getting Started with Alfresco ADF Component - EnProwess Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#primaryimage\"},\"datePublished\":\"2018-02-19T07:23:03+00:00\",\"dateModified\":\"2018-08-29T03:27:04+00:00\",\"description\":\"Want to learn Alfresco ADF component, this Enprowess blog is about detailed development steps for developing custom ADF component\",\"breadcrumb\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.enprowess.com\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Alfresco\",\"item\":\"https:\/\/www.enprowess.com\/blogs\/category\/alfresco\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Getting Started with Alfresco ADF Component\"}]},{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#\/schema\/person\/cb84840e7dba202419065ea1c9fe7f11\"},\"headline\":\"Getting Started with Alfresco ADF Component\",\"datePublished\":\"2018-02-19T07:23:03+00:00\",\"dateModified\":\"2018-08-29T03:27:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#webpage\"},\"wordCount\":1247,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/alfresco-banner-ADF.png\",\"keywords\":[\"ACS\",\"ADF\",\"Alfresco\",\"Alfresco content service\"],\"articleSection\":[\"Alfresco\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#\/schema\/person\/cb84840e7dba202419065ea1c9fe7f11\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.enprowess.com\/blogs\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b43445b202a083f6e4a2f2e7d6f43d62?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b43445b202a083f6e4a2f2e7d6f43d62?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.enprowess.com\/blogs\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Started with Alfresco ADF Component - EnProwess Blog","description":"Want to learn Alfresco ADF component, this Enprowess blog is about detailed development steps for developing custom ADF component","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:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Alfresco ADF Component","og_description":"Want to learn Alfresco ADF component, this blog is about detailed development steps for developing custom ADF component","og_url":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/","og_site_name":"EnProwess Blog","article_published_time":"2018-02-19T07:23:03+00:00","article_modified_time":"2018-08-29T03:27:04+00:00","og_image":[{"width":786,"height":310,"url":"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/alfresco-banner-ADF.png","type":"image\/png"}],"twitter_card":"summary","twitter_title":"Getting Started with Alfresco ADF Component","twitter_description":"Want to learn Alfresco ADF component, this blog is about detailed development steps for developing custom ADF component","twitter_image":"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/alfresco-banner-ADF.png","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.enprowess.com\/blogs\/#organization","name":"EnProwess","url":"https:\/\/www.enprowess.com\/blogs\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"https:\/\/www.enprowess.com\/blogs\/#logo","inLanguage":"en-US","url":"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2021\/07\/enprowess_logo.jpg","contentUrl":"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2021\/07\/enprowess_logo.jpg","width":1057,"height":697,"caption":"EnProwess"},"image":{"@id":"https:\/\/www.enprowess.com\/blogs\/#logo"}},{"@type":"WebSite","@id":"https:\/\/www.enprowess.com\/blogs\/#website","url":"https:\/\/www.enprowess.com\/blogs\/","name":"EnProwess Blog","description":"Your Enterprise solution partner","publisher":{"@id":"https:\/\/www.enprowess.com\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.enprowess.com\/blogs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#primaryimage","inLanguage":"en-US","url":"","contentUrl":""},{"@type":"WebPage","@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#webpage","url":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/","name":"Getting Started with Alfresco ADF Component - EnProwess Blog","isPartOf":{"@id":"https:\/\/www.enprowess.com\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#primaryimage"},"datePublished":"2018-02-19T07:23:03+00:00","dateModified":"2018-08-29T03:27:04+00:00","description":"Want to learn Alfresco ADF component, this Enprowess blog is about detailed development steps for developing custom ADF component","breadcrumb":{"@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.enprowess.com\/blogs\/"},{"@type":"ListItem","position":2,"name":"Alfresco","item":"https:\/\/www.enprowess.com\/blogs\/category\/alfresco\/"},{"@type":"ListItem","position":3,"name":"Getting Started with Alfresco ADF Component"}]},{"@type":"TechArticle","@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#article","isPartOf":{"@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#webpage"},"author":{"@id":"https:\/\/www.enprowess.com\/blogs\/#\/schema\/person\/cb84840e7dba202419065ea1c9fe7f11"},"headline":"Getting Started with Alfresco ADF Component","datePublished":"2018-02-19T07:23:03+00:00","dateModified":"2018-08-29T03:27:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#webpage"},"wordCount":1247,"commentCount":0,"publisher":{"@id":"https:\/\/www.enprowess.com\/blogs\/#organization"},"image":{"@id":"https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#primaryimage"},"thumbnailUrl":"https:\/\/www.enprowess.com\/blogs\/wp-content\/uploads\/2018\/02\/alfresco-banner-ADF.png","keywords":["ACS","ADF","Alfresco","Alfresco content service"],"articleSection":["Alfresco"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.enprowess.com\/blogs\/alfresco-adf-component\/#respond"]}]},{"@type":"Person","@id":"https:\/\/www.enprowess.com\/blogs\/#\/schema\/person\/cb84840e7dba202419065ea1c9fe7f11","name":"admin","image":{"@type":"ImageObject","@id":"https:\/\/www.enprowess.com\/blogs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/b43445b202a083f6e4a2f2e7d6f43d62?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b43445b202a083f6e4a2f2e7d6f43d62?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.enprowess.com\/blogs\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/posts\/2131"}],"collection":[{"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/comments?post=2131"}],"version-history":[{"count":26,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/posts\/2131\/revisions"}],"predecessor-version":[{"id":2228,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/posts\/2131\/revisions\/2228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/media\/2227"}],"wp:attachment":[{"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/media?parent=2131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/categories?post=2131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.enprowess.com\/blogs\/wp-json\/wp\/v2\/tags?post=2131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}