Understanding Umbraco concepts and tutorials

Possibly save 1 hour of your time: After installation of Umbraco, you may now want to implement your own web pages. After you run the app, you can type in /umbraco on the url to go to backoffice (administrator area).

You will need to understand the concept of:

  • Document Type (Structure of content)
  • Template and output Document Type properties
  • Content Node (Content Page)

Other related concepts:

  • CSS and JavaScript
  • Master Page
  • Property Editor

Document Type (Structure of content)

You may need to create a Document Type under Settings. This allows you to define the structure of the content.

create document type.png

You also need to got to Permissions and check Allow as root. This will allow you to select this document type when creating the content node later.

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/document-types

Template and output Document Type properties

The template is automatically generated if you create the document type with template. The template contains Razor code. It creates a .cshtml file under folder Views in the project. The template is basically the view.

create template

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Creating-Your-First-Template-and-Content-Node

If you want to display something here, you will need to code this or use the feature in the backoffice. It does not automatically create the view elements. For example I know in the document type there is an element named MichaelTopContent. Then in the template, I just add the binding using Razor syntax. i.e. @Model.Content.MichaelTopContent

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Outputting-the-Document-Type-Properties

Content Node (Content Page)

You can create your own page under Content section. If you want to create a page under Home using the document type create earlier. You need to add permissions for the new document type under the Home document type. Go to Settings >> Document Types >> Home and then Permissions on the upper corner. Under Allowed child node types >> Add child, then select your document type.

Now you will click on Home and create an item under Home by selecting the new document type.

create content node with custom document type.png

CSS and Javascript

There are two project folders where you can put your css and js files namely css and scripts folder. You then can reference those files in your template. i.e.

<link rel="stylesheet" href="css/style.css">

http://scripts/libs/modernizr-2.0.6.min.js

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/CSS-And-Javascript

Master Page

This is same concept as in ASP.NET master pages.

Reference: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Creating-Master-Template-Part-1

Property Editor

You can create your own custom property editor.

Reference: https://our.umbraco.org/documentation/Tutorials/Creating-a-Property-Editor/

Umbraco Users Guide

Advertisements

Install Umbraco Content Management System (CMS)

Possibly save 1 hour of your time: I am trying to use Umbraco CMS, an open source content management system.

I download and install WebMatrix3.

Then I download the latest package for Umbraco and unzip.

Next I right click on folder and choose open as a website with Microsoft WebMatrix

open with webmatrix.png

Then you click Run in the WebMatrix.

run.png

It will bring you to back office (admin area) for Umbraco. You can also install Umbraco Forms by going to the left menu items and click on Forms and then install button. After you install, you still need to buy a license to use it.

back office forms

Umbraco User’s Guide

Install Apache Cordova Update 10

Possibly save 1 hour of your time: I am about to start on a new project that requires website and native mobile application development. After researching between Xamarin and Apache Cordova, I have decided to leverage using html/javascript/css skills with Apache Cordova to build the mobile apps. Of course, you can leverage C# with Xamarin. However I feel that we can leverage javascript for front end development and probably C# for back end API calls.

I am using the following reference if you want to follow:

https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/build-your-first-app

If you haven’t use Apache Cordova before, you will have to install it.

  • Open Visual Studio (mine is Professional 2015)
  • File -> New Project
  • Installed -> Templates -> Javascript or Typescript (I chose Typescript)
  • Then you will see a template for Install Apache Cordova Update 10
  • Double click on it to start the installation
  • Note that it will take 14 GB. The picture below does not show all the required installations, but it does install quite a bit of stuff.
  • Note that it also takes over an hour for me. Prior to install, it will ask you to close all Visual Studio instances.

install Apache Cordova Update 10

After installation, I got the following messages:

after apache cordova installation

This is part of a series of blogs I will be writing as I experience in this journey learning to use Apache Cordova.

  1. Part 1 – Install Apache Cordova Update 10

Apache Cordova in Action

Shrink local database log file to save disk space

Possibly save 1 hour of your time: I notice my machine disk space is running low. So where can I save some space.

First, download a free program call WindirStat. This program will tell you in a very nice visual way of where most of your space are taken up.

So I found out from my machine there are two database log files in which both took up over 50 GB.

Solution: I backup the database first. Then I ran the following command on the specific database in SQL Server Management Studio 2012.

select * from sys.database_files --find the name of the log file

ALTER DATABASE your_database_name SET RECOVERY SIMPLE
DBCC SHRINKFILE('name_of_log', 0, TRUNCATEONLY)
ALTER DATABASE your_database_name SET RECOVERY FULL

Murach’s SQL Server 2016 for Developers

Mapbox Leaflet Heat Map using multi-hued color scales gradient

Possibly save 2 hours of your time: The application I worked on uses Mapbox Leaflet for the interactive map. It currently uses linear gradient for the heat map that starts from one color and ends in another color. The client likes to change that to multi color gradient. This allows easier differentiation of closer boundaries on the map.

This link from leaflet provides how to do this on the link below. It changes the style of fillColor to use a custom function that calculates and returns the color based on the density.

http://leafletjs.com/examples/choropleth/

The following site talks about how to select multi-hued color scales:

https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/

And this tool helps you define the color gradient:

https://gka.github.io/palettes/#colors=white,deeppink,yellow,#002060|steps=4|bez=1|coL=1

This tool helps you convert colors from hex to rgba:

https://www.hexcolortool.com/#ec132c

Mapbox Cookbook

FTP Task – FTP Import: Error: Directory is not specified in the file connection manager $Package-variableName

Possibly save 4 hours of your time: I notice some of my SSIS jobs are no longer working and the errors are different for each of them. But one error gave clue about the package variable issue.

When I run the package directly using environment variables, it works fine. But when I use a job with proxy/credential identity, it failed. So there is another hint this is related to permission issue.

What caught me off guard was these jobs used to work.

The jobs ftp files from/to the ftp server to a network location.

The variable in this case was a network path.

Solution:

We change the environment variable to point to a local path and it works. This identifies that the issue has to do with the identity used to run the job does not have access to the network location defined by the variable.

Professional Microsoft SQL Server 2014 Integration Services (Wrox Programmer to Programmer)

The Web Application Project is configured to use IIS. Unable to access the IIS metabase. You do not have sufficient privilege to access IIS web sites on your machine.

Possibly save 1 hour of your time: After upgrading my work machine to Windows 10 Anniversary update, I cannot load my web application project. In my situation, I am not running as administrator.

  1. You can run Visual Studio as administrator, and the project should load fine.
  2. In my situation I don’t want to run as administrator, then you will have to go to %systemroot%\System32\inetsrv\config. It will ask you to prompt in your administrator login. Do that. Once you have accessed to that folder, now you can go back to your Visual Studio and try loading that project again. It works for me subsequently after.

IIS 10: Web Apps, Security & Maintenance (IT Pro Solutions)

Turn on https with SSL self signed certificate on local IIS environment

Possibly save 1 hour of your time: There are times when you have to set up your website during development to use https. Please see a reason from my previous article Chrome requires https for input text fields.

Create self signed certificate

  • Under IIS > select main instance > select Server Certificates in the middle pane
  • Right click and choose Create Self-Signed Certificate…
  • Enter friendly name for the certificate.

selfsignedcertificate.png

localtestingcertificate.png

Bind your site to the self signed certificate

  • Under IIS > Sites > select your website > on the right pane Actions select Bindings
  • On Site Bindings window > click Add
  • Add Site Binding

addsitebinding.png

That is it. You should be able to hit https on your website. You will still get unsecure message from the browser as it is not a real certificate.

IIS 10: Essentials for Administration (IT Pro Solutions)

SSIS – An error occurred in the requested FTP operation. Detailed error description: The password was not allowed

Possibly save 4 hours of your time: When you deploy a package with FTP Connection Manager you can get this error in which it says the password was not allowed.

The SQL Server Agent job is set up to use environment variables and the variables are also setup. However the job still fails when it try to connect to the FTP server. So for some reason the Environment variables are not working. The following environment variables are there (i.e. naming convention may be different from yours)

  1. FTPConnection_ServerName
  2. FTPConnection_ServerPort
  3. FTPConnection_ServerUserName
  4. FTPConnection_ServerPassword

The problem was that these variables are not directly used by the FTP Connection Manager in the package yet. You can right click the FTP Connection Manager and choose Parameterize. By choosing the Use existing parameter, that will link to the package parameter used in this package.

Parameterize right click

Parameterize.png

P.S. > If you are not using environment variables in your deployment, then you may also want to change protection level by right click Properties on the project and the package to Do not save sensitive data. However this is not recommended. Please use at own risk. There are other scripting solutions so that it is not required to deploy the password. Please google that.

do not save sensitive data

Professional Microsoft SQL Server 2014 Integration Services (Wrox Programmer to Programmer)

SSIS – Project Parameters, Package Parameters, User Variables

Possibly save 1 hour of your time: There are three types of parameters in SSIS that you can configure to use by your packages.

  1. Project parameters
  2. Package parameters
  3. User variables

You can access project parameters from the Team Explorer >> Project.params.

Project Parameters

Next you can access the package variables by double clicking the package to open the designer and choose tab Parameters.

Package Variables

Finally, you also have user variables. You can right click on the Control Flow designer and choose User Variables.

User Variables

Professional Microsoft SQL Server 2014 Integration Services (Wrox Programmer to Programmer)