Plugin Archives - Blog IT

How to modify and compile a mobile plugin using OutSystems

Marisa Barradas — Mon, 18 Nov 2019 15:05:12 +0000

As an OutSystems developer, I had the need to use a QR Code plugin reader.

First step? Started by creating a test project to be able to choose the best plugin that suited my needs.

However…In the moment that I had to install it in the final app, I ran into… “Element uses-permission#android.permission.CAMERA at AndroidManifest.xml:30:5-90 duplicated with element declared at AndroidManifest.xml” error!

The plugin was: https://www.outsystems.com/forge/component-versions/1403 , and by extensibility configurations, I reached the project URL, as in the image bellow.

So, after a brief research, I found out that what I had to do was a minor change in plugin.xml file, instead of having

I had to have:

So all I needed to do, was to change this snippet and compile it into the OutSystems project.

So, how can we do it without native software?

1^st step: create a git account at https://github.com/ and install git https://gitforwindows.org/

2nd step: Fork the project.

Then, in your computer, open git bash in the project folder that you want the project:

Config your account on git bash.

git config –global user.name “your username”

git config –global user.password “your password”

git config user.name “your username”

git config user.password “your password”

And clone the project, as showed in the image bellow.

After cloning the project into your computer, make your code changes using any editor, and then, follow the steps:

Check modified files: git status
Add modified files into the list of the next commit: git add -u
Commit your changes: git commit -m “description”
Create a tag: git tag v1.0_1.0 -a
Push your changes into the server: git push origin –tags

The project is now ready to be compiled in OutSystems project!!

Open your plugin in OutSystems, and change the URL to your repository#yourtag

1 – Publish the changes
2 – Generate App – this will compile your plugin changes

Reinstall the app in your device, and test it! 🙂

References:

https://www.outsystems.com/forums/discussion/44842/box-camera-overlay/

https://github.com/phonegap/phonegap-plugin-barcodescanner/issues/418

The post How to modify and compile a mobile plugin using OutSystems appeared first on Blog IT.

Automatic generation of Umbraco packages with Grunt

André Santos — Mon, 07 Mar 2016 16:03:50 +0000

Manually creating Umbraco packages can be tiresome.

If you’re continuously building upon the same package, doing it manually is wasting time that can be more useful developing new features.

This problem presented itself to me when improving Approve It. In order to create the Umbraco package I need several things:

The main assembly
The new dashboard section html file
The App_Plugins folder which contains every angular controller and views, javascript frameworks and custom css
The Package Actions Contrib assembly and its respective actions that enable me to bundle some translations in the package

I decided to go with Grunt and the Grunt Umbraco Package task. A grunt file is a script that typically automates the process of executing some tasks. These scripts can be executed on top of NPM, a package manager for javscript that provides a command line tool to run its packages. To streamline even more the package creation, I installed a Visual Studio extension called NPM Scripts Task Runner, that detects the grunt file and provides a simples UI to handle its tasks.

Step 1 – Install NPM

With NPM installed we are able to execute a Grunt file.

Step 2 – Install NPM Scripts Task Runner

The Visual Studio extension:

NPM Scripts Task Runner Visual Studio extension

Step 3 – Create a Grunt file

And place it in your project:

module.exports = function (grunt) {

    // Setup
    var pkg = grunt.file.readJSON('package.json');
    var projectRoot = 'C:/path/to/project/ApproveIt/';
    var packageNamespace = "Create.Plugin";

    // Grunt Configuration
    grunt.initConfig({
        pkg: pkg,
        clean: {
            files: [
                'bld/App_Plugins',
                'bld/bin',
                'bld/Umbraco'
            ]
        },
        copy: {
            release: {
                files: [
                    {
                        expand: true,
                        cwd: projectRoot + 'bin/',
                        src: [
                            packageNamespace + '.' + pkg.name + '.dll',
                            'PackageActionsContrib.dll'
                        ],
                        dest: 'bld/bin/'
                    },
                    {
                        expand: true,
                        cwd: projectRoot + 'App_Plugins/',
                        src: ['**'],
                        dest: 'bld/App_Plugins/'
                    },
                    {
                        expand: true,
                        cwd: projectRoot + 'Dashboard/Views/dashboard/approveIt/',
                        src: ['approveItdashboardintro.html'],
                        dest: "bld/Umbraco/Views/dashboard/approveIt/"
                    }
                ]
            }
        },
        umbracoPackage: {
            release: {
                src: 'bld/',
                dest: 'bin/umbraco',
                options: {
                    name: pkg.name,
                    version: pkg.version,
                    url: pkg.url,
                    license: pkg.license.name,
                    licenseUrl: pkg.license.url,
                    author: pkg.author.name,
                    authorUrl: pkg.author.url,
                    readme: pkg.readme,
                    outputName: pkg.name + '.v' + pkg.version + '.zip',
                    manifest: 'package.xml'
                }
            }
        }
    });

    // Loading of Grunt Tasks
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-umbraco-package');
};

This file has three sections, which I’ll explain in a different order:

Setup
Grunt configuration
Loading of grunt tasks

Loading of Grunt Tasks

Most actions we need a grunt file to execute are simplified by the use of existing Grunt tasks. In my case, I only need 3:

grunt-contrib-clean: deletes files and folders
grunt-contrib-copy: copies files and folders
grunt-umbraco-package: generates an umbraco package

Grunt File Setup

Here I define a set of variables and load an external configuration file that contains project properties I use later on:

{
  "author": {
    "name": "André Santos",
    "url": "http://www.create.pt"
  },
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-umbraco-package": "1.0.0"
  },
  "license": {
    "name": "MIT",
    "url": "http://opensource.org/licenses/MIT"
  },
  "name": "ApproveIt",
  "readme": "Umbraco Plugin that creates a section that shows all the content that is waiting approval for publishing.",
  "url": "https://our.umbraco.org/projects/backoffice-extensions/approve-it/",
  "version": "1.0.1"
}

Grunt Configuration

This section is where everything comes together. The package.json configuration file is loaded and the three aforementioned grunt tasks are implemented:

Clean

In here, the directories used as the source for the umbraco package creation, are configured so that when we can empty them at will

Copy

This task copies every file needed by the plugin to a centralized location, creating a snapshot of our plugin. We copy full directories and hand picked files as needed.

Umbraco Package

Finally, this task picks up every file we have copied and creates the final Umbraco package. It uses the configuration properties set in package.json and uses a custom package.xml file so that I can include my custom post umbraco package install actions (using Package Actions Contrib):



  
    
      <%= name %>
      <%= version %>
      <%= license %>
      <%= url %>
      
        3
        0
        0
      
    
    
      <%= author %>
      <%= authorUrl %>
    
    ]]>
  
  
  
  
  
  
  
  
  
  
    
      
        
          approveIt
        
        
          
            views/dashboard/approveIt/approveItdashboardintro.html
          
        
      
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
  	<% files.forEach(function(file) { %>
  	
      <%= file.guid %>
      <%= file.dir %>
      <%= file.name %>
    
	<% }); %>

This file uses the Grunt templating engine so that, not only can I include the Package Action Contrib custom actions, but also some custom variables, such as:

The mandatory list of files that is automatically updated when a new file is added to the project output
The package.json variables

That’s it! We can now create new versions of Approve It without having to go into the Umbraco backoffice and doing it manually every time we need a new package version.

You can find the complete source code in my GitHub: https://github.com/ViGiLnT/ApproveIt. You can download the Approve It package here: https://our.umbraco.org/projects/backoffice-extensions/approve-it/.

The post Automatic generation of Umbraco packages with Grunt appeared first on Blog IT.

Building an Umbraco 7 backoffice extension – Part III

André Santos — Mon, 30 Nov 2015 15:02:06 +0000

The previous post (Part II) showed how to populate the content tree of a custom Umbraco backoffice section. This one presents a way for content managers to quickly handle each post pending approval, which means we’re going to create our own AngularJS controller and view.

AngularJS is a MVC javascript framework mainly mantained by Google which primary goal is to aid in the development of single-page applications. It’s use on the Umbraco backoffice was the most notable change when Umbraco 7 was first released.

When the content manager selects one node pending approval we want him to be able to take three quick actions:

get some information about that node;
quickly access it in the content section;
quickly publish it.

New Angular controllers and views must be placed in a specific Umbraco directory, following a specific directory structure:

the main directory must reside at ~\App_Plugins\ApproveIt – the plugin name
the views and controllers must reside at App_Plugins\ApproveIt\backoffice\approvalTree\ – the tree controller name

First things first:

Create a package manifest so that Umbraco knows there are new javascript files available, and place it in the root of App_Plugins\ApproveIt directory.


{
	javascript: [
		'~/App_Plugins/ApproveIt/backoffice/approvalTree/edit.controller.js',
		'~/App_Plugins/ApproveIt/approval.resource.js'
	]
}

Then we must create the javascript files referenced by the manifest and the respective angular view.


angular.module("umbraco.resources")
	.factory("approvalResource", function ($http) {
	    return {
	        getById: function (id) {
	            return $http.get("backoffice/ApproveIt/ApprovalApi/GetById?id=" + id);
	        },
	        publish: function (id) {
	            return $http.post("backoffice/ApproveIt/ApprovalApi/PostPublish?id=" + id);
	        }
	    };
	});

This javascript file provides a new Angular Service that can then be used by Angular controllers. This service is no more than a facade for the ApprovalApiController created on Part II. The methods it connects to are created further on.


angular.module("umbraco").controller("Approval.ApprovalEditController",
	function ($scope, $routeParams, approvalResource, notificationsService, navigationService) {

	    $scope.loaded = false;

	    if ($routeParams.id == -1) {
	        $scope.node = {};
	        $scope.loaded = true;
	    }
	    else {
	        approvalResource.getById($routeParams.id).then(function (response) {
	            $scope.node = response.data;
	            $scope.loaded = true;
	        });
	    }

	    $scope.publish = function (node) {
	        approvalResource.publish(node.Id).then(function (response) {
	            $scope.node = response.data;
	            $scope.contentForm.$dirty = false;
	            navigationService.syncTree({ tree: 'approvalTree', path: [-1, -1], forceReload: true });
	            notificationsService.success("Success", node.Name + " has been published");
	        });
	    };

	});

This Angular controller is called when the Approve It section is being used:

If no node is selected (for instance, when we access this section for the first time) we do nothing;
If a node is selected ($routeParams.id != -1) we request the node details through our approval.resource service facade
Finally, the quick publish method is also implemented here. This methods calls the ApprovalResource service which then invokes the publish method of the ApprovalApiController.

The node view presents the waiting approval page name and two buttons: one to quickly navigate to it’s details and another to publish it.

Finally, we need to update the ApprovalApiController.cs to include two new methods:


public IContent GetById(int id)
{
    IContent content = ApplicationContext.Services.ContentService.GetById(id);
    return content;
}

public IContent PostPublish(int id)
{
    IContent node = ApplicationContext.Services.ContentService.GetById(id);
    ApplicationContext.Services.ContentService.Publish(node);

    return node;
}

GetById: returns the node details to the angular view
PostPublish: publishes the node being viewed

By following these steps we are able to create a complete new Umbraco backoffice section that provides us with a way to manage every site content waiting approval for publishing:

If you want to see how this plugin as been evolving, you can check its source code in github: https://github.com/ViGiLnT/ApproveIt. You can also download the plugin ready to be installed at Umbraco’s extensions repository: https://our.umbraco.org/projects/backoffice-extensions/approve-it/. Other Umbraco 7 tutorials and information can be found here: http://umbraco.github.io/Belle.

The post Building an Umbraco 7 backoffice extension – Part III appeared first on Blog IT.

Building an Umbraco 7 backoffice extension – Part II

André Santos — Mon, 23 Nov 2015 10:00:56 +0000

The previous post (Building an Umbraco 7 backoffice extension – Part I), demonstrated how easy it is to create a new section in Umbraco’s backoffice. This post will show how we can populate this new section with meaningful content coming directly from the backoffice.

To begin with, we must reference a few more assemblies (also available at the Umbraco’s installation bin directory):

umbraco.dll
cms.dll
Umbraco.Core.dll
System.Web.Http
System.Net.Http.Formatting

Then we can populate our section with a tree containing content awaiting approval. To accomplish this we must extend an Umbraco class named TreeController and decorate it with information about our Approve It plugin:


[Tree("approveIt", "approvalTree", "Content for Approval")]
[PluginController("ApproveIt")]
public class ApprovalTreeController : TreeController
{
   protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
   {
       var ctrl = new ApprovalApiController();
       var nodes = new TreeNodeCollection();

       IUser user = UmbracoContext.Security.CurrentUser;

       //check if we're rendering the root node's children
       if (id == Constants.System.Root.ToInvariantString())
       {
           foreach (IContent content in ctrl.GetAll(user))
           {
                var node = CreateTreeNode(
                    content.Id.ToString(),
                    "-1",
                    queryStrings,
                    content.Name,
                    "icon-document",
                    false);

               nodes.Add(node);
            }
       }

        return nodes;
    }

    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
        var menu = new MenuItemCollection();

        if (id == Constants.System.Root.ToInvariantString())
        {
            // root actions
            menu.Items.Add(
                ApplicationContext.Services.TextService.Localize(ActionRefresh.Instance.Alias));
        }

        return menu;
    }
}

To create a tree we must implement two methods:

GetTreeNodes: in here we call the GetAll method of the ApprovalApiController that we’ll create in the following. This GetAll method returns a list of content waiting approval and we just iterate through it all and create tree nodes;
GetMenuForNode: presents a dropdown menu when we right click the root node to refresh the list.

Next we create our custom WebAPI and name it ApprovalApiController. For it to be available in our site, we need only extend the UmbracoAuthorizedJsonController.


[PluginController("ApproveIt")]
public class ApprovalApiController : UmbracoAuthorizedJsonController
{
    public IList UnpublishedContent { get; set; }

    public IEnumerable GetAll(IUser user)
    {
        UnpublishedContent = new List();

        IList root = ApplicationContext.Services.ContentService.GetRootContent().ToList();

        foreach (IContent content in root)
        {
            GetNode(content);
        }

        return UnpublishedContent;
    }

    private void GetNode(IContent node)
    {
        if (!node.Published)
        {
            UnpublishedContent.Add(node);
        }

        foreach (IContent child in ApplicationContext.Services.ContentService.GetChildren(node.Id))
        {
            GetNode(child);
        }
    }
}

The GetAll method, iterates through all the nodes in the content section and finds the ones that are not published, that is, that are waiting approval.

With these two classes we are able to populate our section with a tree containing the content nodes that are waiting approval:

The next post in the series will show how to create the Angular view and controller that will enable content managers to actually manage the content waiting approval.

The Approve It extension can be found here: https://our.umbraco.org/projects/backoffice-extensions/approve-it/. The complete source code can be found here: https://github.com/ViGiLnT/ApproveIt.

The post Building an Umbraco 7 backoffice extension – Part II appeared first on Blog IT.

Building an Umbraco 7 backoffice extension – Part I

André Santos — Mon, 16 Nov 2015 15:34:25 +0000

Umbraco (https://umbraco.com/) is a lean and powerful CMS built on top of current .NET technologies and Javascript frameworks. It provides developers with a varied and simple to use collection of APIs, it is easy to customize and doesn’t get in the way between the coded markup and the HTML that is actually rendered.

The next series of posts will show how to build plugins that extend the default Umbraco backoffice capabilities.

How is it built?

The release of Umbraco’s version 7 presented a completely redesigned backoffice. It went from a typical MVC website to a single page application built using AngularJS. Umbraco custom WebAPIs are used by Angular controllers in order to read information from the backoffice.

How can we change it?

A typical Umbraco 7 backoffice extension requires:

Creation of Angular controllers, views and probably models;
Umbraco WebAPI extensions in order to access Umbraco’s backoffice and for custom server side development;
Extension of some Umbraco classes to customize common backoffice functionalities.

What to do?

These series of posts will gradually present a way to build a new backoffice section, that will provide content managers with a centralized area where they can approve changes made to content. This backoffice extension was named Approve It. Natively, Umbraco sends an email to each content approver when changes are made to content nodes but, if an approver wants to see what nodes were updated just by visiting the backoffice, he must traverse every node to see which ones present a change waiting approval. This gets harder as the number of content nodes increase, and the changed nodes can be difficult to spot as we can see from the image below:

The red arrows point to changed content – we can’t tell by the parent node if one of its children has changed

Preparing the development environment

Download the latest and greatest version of Umbraco 7 (currently at v7.3.1): https://our.umbraco.org/contribute/releases/731/
Download and setup WebMatrix: http://www.microsoft.com/web/webmatrix/
Create a new web site in WebMatrix selecting the folder which contains Umbraco’s downloaded .zip file contents and go through the Setup
1. Select customize
2. Use a SQL CE database
3. Choose any starter kit (I chose Txt Starter Kit)
Create a new Empty ASP.NET project in Visual Studio (I’m using VS2015) and add folders and core references for MVC

Creating a new backoffice section

Creating a new section in Umbraco is easy:

Add references to the following three assemblies available in the bin Umbraco directory:
- businesslogic.dll
- interfaces.dll
- System.Web.Mvc.dll (need to replace the one Visual Studio automatically referenced)
Create a new .cs file in the project with the following code:


[Application("approveIt", "ApproveIt", "icon-people", 15)]
public class Section : IApplication
{
}

Simply implementing the IApplication interface, creates a new Umbraco backoffice section with the properties defined above.

The next step is translating the section name. If we don’t translate it, it will show up as [approveIt]. So, we must edit the file \Umbraco\Config\Lang\en.xml (for the UK version), and append the “approveIt” line in the “sections” area:


&amp;lt;area alias="sections"&amp;gt;
  &amp;lt;key alias="concierge"&amp;gt;Concierge&amp;lt;/key&amp;gt;
  &amp;lt;key alias="content"&amp;gt;Content&amp;lt;/key&amp;gt;
  &amp;lt;key alias="courier"&amp;gt;Courier&amp;lt;/key&amp;gt;
  &amp;lt;key alias="developer"&amp;gt;Developer&amp;lt;/key&amp;gt;
  &amp;lt;key alias="installer"&amp;gt;Umbraco Configuration Wizard&amp;lt;/key&amp;gt;
  &amp;lt;key alias="media"&amp;gt;Media&amp;lt;/key&amp;gt;
  &amp;lt;key alias="member"&amp;gt;Members&amp;lt;/key&amp;gt;
  &amp;lt;key alias="newsletters"&amp;gt;Newsletters&amp;lt;/key&amp;gt;
  &amp;lt;key alias="settings"&amp;gt;Settings&amp;lt;/key&amp;gt;
  &amp;lt;key alias="statistics"&amp;gt;Statistics&amp;lt;/key&amp;gt;
  &amp;lt;key alias="translation"&amp;gt;Translation&amp;lt;/key&amp;gt;
  &amp;lt;key alias="users"&amp;gt;Users&amp;lt;/key&amp;gt;
  &amp;lt;key alias="help" version="7.0"&amp;gt;Help&amp;lt;/key&amp;gt;
  &amp;lt;key alias="forms"&amp;gt;Forms&amp;lt;/key&amp;gt;
  &amp;lt;key alias="analytics"&amp;gt;Analytics&amp;lt;/key&amp;gt;
  &amp;lt;key alias="approveIt"&amp;gt;Approve It&amp;lt;/key&amp;gt;
&amp;lt;/area&amp;gt;

Note: for the new section to appear you must add it to the available sections your user can see. Furthermore, because of caching, you probably need to restart the website and open a browser window in private mode in order to see the new section.

This is how it looks:

So, we have a new section, but there’s nothing we can do with it. The next post in the series will show how we can add some content to this newly created Umbraco backoffice area.

The Approve It extension can be found here: https://our.umbraco.org/projects/backoffice-extensions/approve-it/. The complete source code can be found here: https://github.com/ViGiLnT/ApproveIt.

The post Building an Umbraco 7 backoffice extension – Part I appeared first on Blog IT.