Plugin Development - Capturing Data from the Front
Hello Umbraco Lovers
I need to build a plugin in Umbraco that does the following:
a reusable component that can be as a "Plug & Play" in different Umbraco website.
Has an editor in the back office where we can add URL of API (part of the configuration).
The API will be a 3rd party that will manipulate the data.
Has a render view that captures data like name, address, DOB, Gender in the Front End.
Then render/Front view will have a "SAVE" button which when clicked will consume the API added in Step 2.
I have done hundreds of search online to find any ideas/solution but in vain
All the plugin development that I have found only show Back office integration, but not Front-end integration.
So you could create a document type that contains your API URL and another that acts as a container for the API render page. Then in your API render page you get the URL from the document type (which can be edited in Umbraco) and then perform the actions via a controller etc. You can then package this all up and install it into any Umbraco site.
Just to confirm my understanding of the Umbraco Architecture.
Angular JS is to develop back-office ONLY. ?
And we can add this Angular JS into a package/plugin to be reused in different Umbraco instances, right?
Angular JS is not used for Front-End Development, right?
So, in Umbraco's language, Front End Development is done on templates.
We can use view/partial views to develop Front-End and eventually add these into a package/plugin to be re-used in difference Umbraco instances, right?
Thank you very much in clearing out my confusion about Umbraco back office development and Umbraco Front-End development.
Yes, it's a bit confusing, but web-development covers a very wide range of skills and disciplines.
Angular JS is to develop back-office ONLY. ? And we can add this
Angular JS into a package/plugin to be reused in different Umbraco
instances, right?
AngularJS is a 3rd party client-side (JavaScript) library that is used in the back-office of Umbraco. It runs in the browser. For simple plugins such as adding a property editor (a component for editing umbraco properties, such as a textstring or a dropdown list) then you can often just use AngularJS alone.
However, for more complex stuff you will probably end up using a mixture of server-side C# (MVC Controllers) and client-side Angular scripts. The client side scripts would call server side controllers to do things like get data from Umbraco (via the API) and then display that data and allow it to be manipulated by a user (and sent back to the Controller that then does something with the data).
Angular JS is not used for Front-End Development, right? So, in
Umbraco's language, Front End Development is done on templates. We can
use view/partial views to develop Front-End and eventually add these
into a package/plugin to be re-used in difference Umbraco instances,
right?
AngularJS is certainly not required for front-end template development, no. Generally templates use the Razor scripting language which is part of ASP.NET MVC. So if you are familiar with ASP.NET MVC then templating follows the same pattern using Views and Partials. The actual rendering (generation of the HTML) for views and partials happens server-side and this data is then sent back as HTML to your browser.
Now, you can optionally use a front-end library like Angular with Umbraco in templates - or any other front-end library (like VueJs or jQuery etc). But these are not required in the same way as you have to use Angular in the back-office. Angular is useful if you want to make very interactive pages that process a lot of user input. But for simply display the page content or dealing with simple forms then it is overkill and just adds an extra layer of complexity (unless you are very familiar with it).
Now, an Umbraco package can contain both templates and views (front end) and also Datatypes and Document Types (back end).
Plugin Development - Capturing Data from the Front
Hello Umbraco Lovers
I need to build a plugin in Umbraco that does the following:
a reusable component that can be as a "Plug & Play" in different Umbraco website.
Has an editor in the back office where we can add URL of API (part of the configuration). The API will be a 3rd party that will manipulate the data.
Has a render view that captures data like name, address, DOB, Gender in the Front End.
Then render/Front view will have a "SAVE" button which when clicked will consume the API added in Step 2.
I have done hundreds of search online to find any ideas/solution but in vain All the plugin development that I have found only show Back office integration, but not Front-end integration.
Can you guys show me how can I achieve this task?
Thank you Heveen
You can create a package in Umbraco that contains both content (eg. Document Types and Templates) and binary code.
See https://24days.in/umbraco-cms/2017/creating-and-publishing-a-package/
So you could create a document type that contains your API URL and another that acts as a container for the API render page. Then in your API render page you get the URL from the document type (which can be edited in Umbraco) and then perform the actions via a controller etc. You can then package this all up and install it into any Umbraco site.
See https://our.umbraco.com/Documentation/Implementation/Controllers/
Dear Dan
Thank you very much for the direction you gave.
Just to confirm my understanding of the Umbraco Architecture.
Angular JS is to develop back-office ONLY. ? And we can add this Angular JS into a package/plugin to be reused in different Umbraco instances, right?
Angular JS is not used for Front-End Development, right? So, in Umbraco's language, Front End Development is done on templates. We can use view/partial views to develop Front-End and eventually add these into a package/plugin to be re-used in difference Umbraco instances, right?
Thank you very much in clearing out my confusion about Umbraco back office development and Umbraco Front-End development.
Regards Heveen
Hi Heveen,
Yes, it's a bit confusing, but web-development covers a very wide range of skills and disciplines.
AngularJS is a 3rd party client-side (JavaScript) library that is used in the back-office of Umbraco. It runs in the browser. For simple plugins such as adding a property editor (a component for editing umbraco properties, such as a textstring or a dropdown list) then you can often just use AngularJS alone.
However, for more complex stuff you will probably end up using a mixture of server-side C# (MVC Controllers) and client-side Angular scripts. The client side scripts would call server side controllers to do things like get data from Umbraco (via the API) and then display that data and allow it to be manipulated by a user (and sent back to the Controller that then does something with the data).
For instance, I've written a package that allows you to view the umbracoLog audit trail data in the Umbraco back-office - see https://our.umbraco.com/packages/developer-tools/diplo-audit-log-viewer/ This uses server-side C# to get the data from the Umbraco database but then uses AngularJS to format and display that data. (The source code is here: https://github.com/DanDiplo/Umbraco.AuditLogViewer)
For more info on developer related topics you can check the reference:
https://our.umbraco.com/documentation/Reference/
AngularJS is certainly not required for front-end template development, no. Generally templates use the Razor scripting language which is part of ASP.NET MVC. So if you are familiar with ASP.NET MVC then templating follows the same pattern using Views and Partials. The actual rendering (generation of the HTML) for views and partials happens server-side and this data is then sent back as HTML to your browser.
Now, you can optionally use a front-end library like Angular with Umbraco in templates - or any other front-end library (like VueJs or jQuery etc). But these are not required in the same way as you have to use Angular in the back-office. Angular is useful if you want to make very interactive pages that process a lot of user input. But for simply display the page content or dealing with simple forms then it is overkill and just adds an extra layer of complexity (unless you are very familiar with it).
Now, an Umbraco package can contain both templates and views (front end) and also Datatypes and Document Types (back end).
The tutorials are a good place to start: https://our.umbraco.com/documentation/Tutorials/
Thank you Dan for this great explanation.
Now it is more clear to me. :)
is working on a reply...