RLV Blog | Thoughts on technology, development tips and other musings by an independent software developer.

Converting a CSV file to RegX with PowerShell

Posted on February 13, 2016 by Dan

If you need to convert a CSV file with terms to a RegX file for use in your .Net project, you can use this simple PowerShell script:

$items = Import-Csv "C:\strings.csv" -Delimiter ',' -Encoding Default
[System.Resources.ResXResourceWriter]$resxWriter = New-Object System.Resources.ResXResourceWriter("c:\strings.resx")
$items | ForEach-Object { 
    $resxWriter.AddResource($_.Name, $_.Value);
}
$resxWriter.Close()

$items = Import-Csv "C:\strings.csv" -Delimiter ',' -Encoding Default

[System.Resources.ResXResourceWriter]$resxWriter = New-Object System.Resources.ResXResourceWriter("c:\strings.resx")

$items | ForEach-Object {

$resxWriter.AddResource($_.Name, $_.Value);

}

$resxWriter.Close()

The script assumes your CSV file contains two columns, “Name” and “Value”, such as this:

Name,Value
MyString1,First value
MyString2,Second value
MyString3,Third value

Name,Value

MyString1,First value

MyString2,Second value

MyString3,Third value

You can use Excel to export such files. You may need to change the -Delimiter parameter in the script to match your locale (Why? See my post on working with CSV files in Excel).

Posted in Development, Tips | Tagged csv, excel, powershell, regx | Leave a comment

Working with enterprise custom fields in Project Online

Posted on February 7, 2016 by Dan

I was tasked with with writing a utility for setting Enterprise Custom Fields on User Resources in Microsoft Project Online. The fields got their values from Lookup Tables. Since is was Project Online, the client side object model, CSOM, had to be used. Without previous experience of MS Project, this proved to be tricky.

Here I present a C# class that should help anyone in the same situation to get started. It is a simple console application that show various ways to interact with MS Project, and in particular how to extract available custom field values and and set on user resources. Below are some interesting snippets of the code showing how to work with Project and CSOM. The complete class can do more and is available at the bottom as well as on GitHub.

Project Online is a (very) customized SharePoint site collection. We can use same techniques when working with it as with any SharePoint Online site. As always, we need to begin with getting a context. In this case we request a ProjectContext which is just a normal SharePoint context object with additional properties:

var username = "user@mytenant.onmicrosoft.com";
var password = "12345";
var site = "https://mytenant.sharepoint.com/sites/PROJ";

var securePassword = new SecureString();
foreach (var ch in password.ToCharArray())
{
    securePassword.AppendChar(ch);
}

context = new ProjectContext(site);
context.Credentials = new SharePointOnlineCredentials(username, securePassword);

var username = "user@mytenant.onmicrosoft.com";

var password = "12345";

var site = "https://mytenant.sharepoint.com/sites/PROJ";

var securePassword = new SecureString();

foreach (var ch in password.ToCharArray())

{

securePassword.AppendChar(ch);

}

context = new ProjectContext(site);

context.Credentials = new SharePointOnlineCredentials(username, securePassword);

As always in CSOM, we need to explicitly load all resources we need to access:

context.Load(context.Web);
context.ExecuteQuery();
Console.WriteLine("   Connected to '" + context.Web.Title + "'");

context.Load(context.Web);

context.ExecuteQuery();

Console.WriteLine(" Connected to '" + context.Web.Title + "'");

Listing enterprise custom fields and lookup table entries is simply a matter of iterating over the respective properties:

CustomFieldCollection customFields = context.CustomFields;
LookupTableCollection lookupTables = context.LookupTables;
context.Load(customFields);
context.Load(lookupTables);
context.ExecuteQuery();

Console.WriteLine("Custom Fields:");
foreach (CustomField cf in customFields)
{
    Console.WriteLine(cf.Name + " {" + cf.Id + "}  (" + entry.InternalName + ")");
}

Console.WriteLine("Lookup Tables");
foreach (LookupTable lt in lookupTables)
{
    Console.WriteLine(lt.Name + " {" + lt.Id + "}");
    context.Load(lt.Entries);
    context.ExecuteQuery();
    foreach (LookupEntry entry in lt.Entries)
    {
        Console.WriteLine("    " + entry.FullValue + " {" + entry.Id + "}  (" + entry.InternalName + ")");
    }
}

CustomFieldCollection customFields = context.CustomFields;

LookupTableCollection lookupTables = context.LookupTables;

context.Load(customFields);

context.Load(lookupTables);

context.ExecuteQuery();

Console.WriteLine("Custom Fields:");

foreach (CustomField cf in customFields)

{

Console.WriteLine(cf.Name + " {" + cf.Id + "} (" + entry.InternalName + ")");

}

Console.WriteLine("Lookup Tables");

foreach (LookupTable lt in lookupTables)

{

Console.WriteLine(lt.Name + " {" + lt.Id + "}");

context.Load(lt.Entries);

context.ExecuteQuery();

foreach (LookupEntry entry in lt.Entries)

{

Console.WriteLine(" " + entry.FullValue + " {" + entry.Id + "} (" + entry.InternalName + ")");

}

A user resources is not the same as the user object. It seems that we can’t trust that all users emails are synced to Project Online. To get around this, I load user resource using the login name instead of just the email, by simply appending the claims prefix to the email:

var claimsPrefix = "i:0#.f|membership|";
var loginName = claimsPrefix + userEmail;
User user = context.Web.SiteUsers.GetByLoginName(loginName);
EnterpriseResource userRes = context.EnterpriseResources.GetByUser(user);
context.Load(userRes);
context.ExecuteQuery();
Console.WriteLine("Got user resource: " + userRes.Name);

var claimsPrefix = "i:0#.f|membership|";

var loginName = claimsPrefix + userEmail;

User user = context.Web.SiteUsers.GetByLoginName(loginName);

EnterpriseResource userRes = context.EnterpriseResources.GetByUser(user);

context.Load(userRes);

context.ExecuteQuery();

Console.WriteLine("Got user resource: " + userRes.Name);

Now we can get the custom fields from the user resource. Note that fieldValue is a string array, because it can be multi valued.

var fieldValues = userRes.FieldValues;
if (fieldValues.Count == 0)
{
    Console.WriteLine("User has no custom fields");
}
foreach (var fieldValue in fieldValues)
{
    Console.WriteLine(fieldValue.Key + " = " + fieldValue.Value);

    foreach (var value in (string[])fieldValue.Value)
    {
        Console.WriteLine("\t{" + value + "}");
    }
}

var fieldValues = userRes.FieldValues;

if (fieldValues.Count == 0)

{

Console.WriteLine("User has no custom fields");

}

foreach (var fieldValue in fieldValues)

{

Console.WriteLine(fieldValue.Key + " = " + fieldValue.Value);

foreach (var value in (string[])fieldValue.Value)

{

Console.WriteLine("\t{" + value + "}");

}

To set a custom field with the value of a lookup table we need to understand the internal structure:

Each value in both the custom fields and lookup tables have a GUID, an internal name and a display name (also called simply name or full value). (The internal name is actually a concatenation of the GUID and a word like “custom” or “entry”.)
A custom field may be bound to a lookup table. We use the internal name of the lookup table entries to set such custom fields.
Since these are custom fields, the compiler is not aware of them. In order to set such a field we need to access it using an [indexer] together with the internal name.
Since field values can be multi-valued, we need to set it using a string array.
Finally, to persist the changes we need to update the EnterpriseResources collection, because this is where the resources are stored.

Now that we know all this, it is actually quite easy to set the field! Assuming that we already have the internal names of the custom field and lookup table entry we wish to set it to:

userRes[customFieldInternalName] = new string[] { lookupTableEntryInternalName };
context.EnterpriseResources.Update();
context.ExecuteQuery();

userRes[customFieldInternalName] = new string[] { lookupTableEntryInternalName };

context.EnterpriseResources.Update();

context.ExecuteQuery();

Putting all of this together, I made a class that can be used to read and write custom fields, and also shows how to list a bunch of information from Project sites and its users. Use it as a template to make your own solution. You need to modify it to use your own login information and GUID:s before you can use it. Again, the full Visual Studio solution can be downloaded from GitHub.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.ProjectServer.Client;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.UserProfiles;
using System.Security;

namespace UserPropsDemo
{
    class UserProps
    {
        private ProjectContext context;

        // Custom Enterprise Fields
        private const string CustomFieldGuid = "618D383A-CCBD-11E5-9FC3-966EB9876117";      // must be a valid guid for a custom field in your MS Project Online
        private Dictionary<string, CustomFieldEntity> AllCustomFields = null;

        // Internal classes for keeping data
        private class LookupEntryEntity
        {
            public string Id { get; set; }
            public string InternalName { get; set; }
            public string Value { get; set; }
        }

        private class CustomFieldEntity
        {
            public string Id { get; set; }
            public string InternalName { get; set; }
            public string Name { get; set; }

            public Dictionary<string, LookupEntryEntity> LookupEntries { get; set; }
            public CustomFieldEntity()
            {
                LookupEntries = new Dictionary<string, LookupEntryEntity>();
            }
        }

        // Constructor. Will connect to Project Online with mandratory credentials.
        public UserProps(string site, string username, string password)
        {
            try
            {
                if (site == "" || username == "" || password == "")
                {
                    throw (new Exception("Must supply site, username and password!"));
                }

                Console.WriteLine("Connecting to Project Online @ " + site + "...");

                var securePassword = new SecureString();
                foreach (var ch in password.ToCharArray())
                {
                    securePassword.AppendChar(ch);
                }

                context = new ProjectContext(site);
                context.Credentials = new SharePointOnlineCredentials(username, securePassword);
                context.Load(context.Web);
                context.ExecuteQuery();
                Console.WriteLine("   Connected to '" + context.Web.Title + "'");
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error: " + ex.Message);
            }
        }

        // Public facing function to set the custom enterprise resource fields
        public void SetCustomField(string userEmail, string newValue = "")
        {
            var user = GetUserResource(userEmail);
            if (user != null)
            {
                // Get all custom fields
                LoadCustomFields();

                // Set the custom enterprise resource field
                try
                {
                    Console.WriteLine("Setting custom enterprise resource property for user...");
                    newValue = newValue.ToLower();
                    var fieldInternalName = AllCustomFields[CustomFieldGuid].InternalName;
                    var entryInternalName = AllCustomFields[CustomFieldGuid].LookupEntries[newValue].InternalName;  // not that we are doing a string match here to figure out the internal name of the value in the lookup table
                    user[fieldInternalName] = new string[] { entryInternalName };   // note that it should be a string array
                    Console.WriteLine("\t" + AllCustomFields[CustomFieldGuid].Name + " >> " + AllCustomFields[CustomFieldGuid].LookupEntries[newValue].Value);
                }
                catch (Exception ex)
                {
                    Console.WriteLine("Could not set custom field " + CustomFieldGuid + " to " + newValue + ": " + ex.Message);
                }


                // Persist changes (note than the resource object is in the EnterpriseResources collection)
                try
                {
                    Console.WriteLine("\tSaving changes...");
                    context.EnterpriseResources.Update();
                    context.ExecuteQuery();
                }
                catch (Exception ex)
                {
                    Console.WriteLine("Error saving: " + ex.Message);
                }
            }
        }

        // Load all custom enterprise resource fields and package in an easy to access dictionary.
        private void LoadCustomFields()
        {
            if (AllCustomFields == null)
            {
                Console.WriteLine("Loading custom fields and lookup entries...");

                // In this example I am only using one custom field. You can add more custom field guids to this list to handle multiple fields
                var customFields = new List<CustomField> { context.CustomFields.GetByGuid(new Guid(CustomFieldGuid)) };
                foreach (var field in customFields)
                {
                    context.Load(field);
                    context.Load(field.LookupEntries);
                }
                context.ExecuteQuery();

                // Package custom fields in an easy to access format
                AllCustomFields = new Dictionary<string, CustomFieldEntity>();
                foreach (var field in customFields)
                {
                    //Console.WriteLine(field.InternalName + " = " + field.Name);
                    var cfe = new CustomFieldEntity() { Id = field.Id.ToString(), InternalName = field.InternalName, Name = field.Name };
                    foreach (var entry in field.LookupEntries)
                    {
                        //Console.WriteLine("\t" + entry.InternalName + " = " + entry.FullValue);
                        cfe.LookupEntries.Add(
                                                entry.FullValue.ToLower(),
                                                new LookupEntryEntity() { Id = entry.Id.ToString(), InternalName = entry.InternalName, Value = entry.FullValue }
                                             );
                    }
                    AllCustomFields.Add(field.Id.ToString(), cfe);
                }
            }
        }


        // Loads a user as an enterprise resouce
        private EnterpriseResource GetUserResource(string userEmail)
        {
            try
            {
                Console.WriteLine("Loading user resource for '" + userEmail + "'");

                // Since we can't trust that email is synced to project, get user by login name instead
                string claimsPrefix = "i:0#.f|membership|";
                var loginName = claimsPrefix + userEmail;
                User user = context.Web.SiteUsers.GetByLoginName(loginName);
                EnterpriseResource res = context.EnterpriseResources.GetByUser(user);
                context.Load(res);
                context.ExecuteQuery();
                Console.WriteLine("   Got resource: " + res.Name + " {" + res.Id + "}");
                return res;
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error loading user: " + ex.Message);
                return null;
            }
        }


        // --------------- Below are some other examples on how to get data from Project ---------------


        // This shows how to get all custom fields present on a user
        public void ListUserResourceCustomFields(string email)
        {
            var userRes = GetUserResource(email);

            // iterate custom fields
            Console.WriteLine("Loading custom fields...");

            var allFields = new Dictionary<string, Dictionary<string, string>>();

            var customFields = userRes.CustomFields;
            context.Load(customFields);
            context.ExecuteQuery();

            foreach (var field in customFields)
            {
                context.Load(field);
                context.Load(field.LookupEntries);
                context.ExecuteQuery();

                //Console.WriteLine("\t" +  field.Name + " {" + field.InternalName + "}");
                var entries = new Dictionary<string, string>();
                entries.Add("KEYNAME", field.Name);

                foreach (var entry in field.LookupEntries)
                {
                    //Console.WriteLine("\t  " + entry.FullValue + " {" + entry.InternalName + "}");
                    entries.Add(entry.InternalName, entry.FullValue);
                }

                allFields.Add(field.InternalName, entries);
            }

            Console.WriteLine("-----------------User Custom Fields-----------------");
            var fieldValues = userRes.FieldValues;
            if (fieldValues.Count == 0)
            {
                Console.WriteLine("User has no custom fields...");
            }
            foreach (var fieldValue in fieldValues)
            {
                Console.WriteLine(allFields[fieldValue.Key]["KEYNAME"] + " {" + fieldValue.Key + "}");

                foreach (var value in (string[])fieldValue.Value)
                {
                    Console.WriteLine("\t" + allFields[fieldValue.Key][value] + " {" + value + "}");
                }
            }
        }

        // This function shows how to list facts about the MS Project site
        public void ListContextData()
        {
            Console.WriteLine("\nListing context data...\n");

            Console.WriteLine("---------------All Projects---------------");
            context.Load(context.Projects);
            context.ExecuteQuery();

            foreach (PublishedProject proj in context.Projects)
            {
                Console.WriteLine(proj.Name);
            }

            Console.WriteLine("---------------All Site Users---------------");
            UserCollection siteUsers = context.Web.SiteUsers;
            context.Load(siteUsers);
            context.ExecuteQuery();

            var peopleManager = new PeopleManager(context);
            foreach (var user in siteUsers)
            {
                try
                {
                    PersonProperties userProfile = peopleManager.GetPropertiesFor(user.LoginName);
                    context.Load(userProfile);
                    context.ExecuteQuery();

                    Console.WriteLine(userProfile.DisplayName + " (" + userProfile.Email + ")");
                }
                catch (Exception ex)
                {
                    Console.WriteLine("Error loading user: " + user.LoginName + " --> " + ex.Message);
                }
            }


            Console.WriteLine("---------------All Site User Resources---------------");
            EnterpriseResourceCollection resources = context.EnterpriseResources;
            context.Load(resources);
            context.ExecuteQuery();

            foreach (EnterpriseResource res in resources)
            {
                Console.WriteLine(res.Name + " {" + res.Id + "}");
            }

            Console.WriteLine("---------------Custom Fields---------------");
            CustomFieldCollection customFields = context.CustomFields;
            context.Load(customFields);
            context.ExecuteQuery();
            foreach (CustomField cf in customFields)
            {
                Console.WriteLine(cf.Name + " {" + cf.Id + "}");
            }

            Console.WriteLine("---------------Lookup Tables---------------");
            LookupTableCollection lookupTables = context.LookupTables;
            context.Load(lookupTables);
            context.ExecuteQuery();
            foreach (LookupTable lt in lookupTables)
            {
                Console.WriteLine(lt.Name + " {" + lt.Id + "}");

                context.Load(lt.Entries);
                context.ExecuteQuery();
                foreach (LookupEntry entry in lt.Entries)
                {
                    Console.WriteLine("    " + entry.FullValue + " {" + entry.Id + "}");
                }
            }
        }

    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Microsoft.ProjectServer.Client;

using Microsoft.SharePoint.Client;

using Microsoft.SharePoint.Client.UserProfiles;

using System.Security;

namespace UserPropsDemo

{

class UserProps

{

private ProjectContext context;

// Custom Enterprise Fields

private const string CustomFieldGuid = "618D383A-CCBD-11E5-9FC3-966EB9876117"; // must be a valid guid for a custom field in your MS Project Online

private Dictionary<string, CustomFieldEntity> AllCustomFields = null;

// Internal classes for keeping data

private class LookupEntryEntity

{

public string Id { get; set; }

public string InternalName { get; set; }

public string Value { get; set; }

}

private class CustomFieldEntity

{

public string Id { get; set; }

public string InternalName { get; set; }

public string Name { get; set; }

public Dictionary<string, LookupEntryEntity> LookupEntries { get; set; }

public CustomFieldEntity()

{

LookupEntries = new Dictionary<string, LookupEntryEntity>();

}

// Constructor. Will connect to Project Online with mandratory credentials.

public UserProps(string site, string username, string password)

{

try

{

if (site == "" || username == "" || password == "")

{

throw (new Exception("Must supply site, username and password!"));

}

Console.WriteLine("Connecting to Project Online @ " + site + "...");

var securePassword = new SecureString();

foreach (var ch in password.ToCharArray())

{

securePassword.AppendChar(ch);

}

context = new ProjectContext(site);

context.Credentials = new SharePointOnlineCredentials(username, securePassword);

context.Load(context.Web);

context.ExecuteQuery();

Console.WriteLine(" Connected to '" + context.Web.Title + "'");

}

catch (Exception ex)

{

Console.WriteLine("Error: " + ex.Message);

}

// Public facing function to set the custom enterprise resource fields

public void SetCustomField(string userEmail, string newValue = "")

{

var user = GetUserResource(userEmail);

if (user != null)

{

// Get all custom fields

LoadCustomFields();

// Set the custom enterprise resource field

try

{

Console.WriteLine("Setting custom enterprise resource property for user...");

newValue = newValue.ToLower();

var fieldInternalName = AllCustomFields[CustomFieldGuid].InternalName;

var entryInternalName = AllCustomFields[CustomFieldGuid].LookupEntries[newValue].InternalName; // not that we are doing a string match here to figure out the internal name of the value in the lookup table

user[fieldInternalName] = new string[] { entryInternalName }; // note that it should be a string array

Console.WriteLine("\t" + AllCustomFields[CustomFieldGuid].Name + " >> " + AllCustomFields[CustomFieldGuid].LookupEntries[newValue].Value);

}

catch (Exception ex)

{

Console.WriteLine("Could not set custom field " + CustomFieldGuid + " to " + newValue + ": " + ex.Message);

}

// Persist changes (note than the resource object is in the EnterpriseResources collection)

try

{

Console.WriteLine("\tSaving changes...");

context.EnterpriseResources.Update();

context.ExecuteQuery();

}

catch (Exception ex)

{

Console.WriteLine("Error saving: " + ex.Message);

}

// Load all custom enterprise resource fields and package in an easy to access dictionary.

private void LoadCustomFields()

{

if (AllCustomFields == null)

{

Console.WriteLine("Loading custom fields and lookup entries...");

// In this example I am only using one custom field. You can add more custom field guids to this list to handle multiple fields

var customFields = new List<CustomField> { context.CustomFields.GetByGuid(new Guid(CustomFieldGuid)) };

foreach (var field in customFields)

{

context.Load(field);

context.Load(field.LookupEntries);

}

context.ExecuteQuery();

// Package custom fields in an easy to access format

AllCustomFields = new Dictionary<string, CustomFieldEntity>();

foreach (var field in customFields)

{

//Console.WriteLine(field.InternalName + " = " + field.Name);

var cfe = new CustomFieldEntity() { Id = field.Id.ToString(), InternalName = field.InternalName, Name = field.Name };

foreach (var entry in field.LookupEntries)

{

//Console.WriteLine("\t" + entry.InternalName + " = " + entry.FullValue);

cfe.LookupEntries.Add(

entry.FullValue.ToLower(),

new LookupEntryEntity() { Id = entry.Id.ToString(), InternalName = entry.InternalName, Value = entry.FullValue }

);

}

AllCustomFields.Add(field.Id.ToString(), cfe);

}

// Loads a user as an enterprise resouce

private EnterpriseResource GetUserResource(string userEmail)

{

try

{

Console.WriteLine("Loading user resource for '" + userEmail + "'");

// Since we can't trust that email is synced to project, get user by login name instead

string claimsPrefix = "i:0#.f|membership|";

var loginName = claimsPrefix + userEmail;

User user = context.Web.SiteUsers.GetByLoginName(loginName);

EnterpriseResource res = context.EnterpriseResources.GetByUser(user);

context.Load(res);

context.ExecuteQuery();

Console.WriteLine(" Got resource: " + res.Name + " {" + res.Id + "}");

return res;

}

catch (Exception ex)

{

Console.WriteLine("Error loading user: " + ex.Message);

return null;

}

// --------------- Below are some other examples on how to get data from Project ---------------

// This shows how to get all custom fields present on a user

public void ListUserResourceCustomFields(string email)

{

var userRes = GetUserResource(email);

// iterate custom fields

Console.WriteLine("Loading custom fields...");

var allFields = new Dictionary<string, Dictionary<string, string>>();

var customFields = userRes.CustomFields;

context.Load(customFields);

context.ExecuteQuery();

foreach (var field in customFields)

{

context.Load(field);

context.Load(field.LookupEntries);

context.ExecuteQuery();

//Console.WriteLine("\t" + field.Name + " {" + field.InternalName + "}");

var entries = new Dictionary<string, string>();

entries.Add("KEYNAME", field.Name);

foreach (var entry in field.LookupEntries)

{

//Console.WriteLine("\t " + entry.FullValue + " {" + entry.InternalName + "}");

entries.Add(entry.InternalName, entry.FullValue);

}

allFields.Add(field.InternalName, entries);

}

Console.WriteLine("-----------------User Custom Fields-----------------");

var fieldValues = userRes.FieldValues;

if (fieldValues.Count == 0)

{

Console.WriteLine("User has no custom fields...");

}

foreach (var fieldValue in fieldValues)

{

Console.WriteLine(allFields[fieldValue.Key]["KEYNAME"] + " {" + fieldValue.Key + "}");

foreach (var value in (string[])fieldValue.Value)

{

Console.WriteLine("\t" + allFields[fieldValue.Key][value] + " {" + value + "}");

}

// This function shows how to list facts about the MS Project site

public void ListContextData()

{

Console.WriteLine("\nListing context data...\n");

Console.WriteLine("---------------All Projects---------------");

context.Load(context.Projects);

context.ExecuteQuery();

foreach (PublishedProject proj in context.Projects)

{

Console.WriteLine(proj.Name);

}

Console.WriteLine("---------------All Site Users---------------");

UserCollection siteUsers = context.Web.SiteUsers;

context.Load(siteUsers);

context.ExecuteQuery();

var peopleManager = new PeopleManager(context);

foreach (var user in siteUsers)

{

try

{

PersonProperties userProfile = peopleManager.GetPropertiesFor(user.LoginName);

context.Load(userProfile);

context.ExecuteQuery();

Console.WriteLine(userProfile.DisplayName + " (" + userProfile.Email + ")");

}

catch (Exception ex)

{

Console.WriteLine("Error loading user: " + user.LoginName + " --> " + ex.Message);

}

Console.WriteLine("---------------All Site User Resources---------------");

EnterpriseResourceCollection resources = context.EnterpriseResources;

context.Load(resources);

context.ExecuteQuery();

foreach (EnterpriseResource res in resources)

{

Console.WriteLine(res.Name + " {" + res.Id + "}");

}

Console.WriteLine("---------------Custom Fields---------------");

CustomFieldCollection customFields = context.CustomFields;

context.Load(customFields);

context.ExecuteQuery();

foreach (CustomField cf in customFields)

{

Console.WriteLine(cf.Name + " {" + cf.Id + "}");

}

Console.WriteLine("---------------Lookup Tables---------------");

LookupTableCollection lookupTables = context.LookupTables;

context.Load(lookupTables);

context.ExecuteQuery();

foreach (LookupTable lt in lookupTables)

{

Console.WriteLine(lt.Name + " {" + lt.Id + "}");

context.Load(lt.Entries);

context.ExecuteQuery();

foreach (LookupEntry entry in lt.Entries)

{

Console.WriteLine(" " + entry.FullValue + " {" + entry.Id + "}");

}

Posted in Development, Tutorials | Tagged c#, csom, Microsoft Project, Project Online, sharepoint online | 1 Comment

See what Boostrap screen mode you are currently viewing

Posted on November 1, 2015 by Dan

Working with a responsive framework such as Bootstrap, you build websites to display differently depending on the screen size. Bootstrap defines four screen widths that determine what “mode” you are in (xs, sm, md and lg). But it’s not always obvious what mode you are viewing. For this I put together a small piece of CSS that can be dropped into any project during development. It will display a label in the top left corner that shows the mode you are currently viewing. Here is a demo. Resize the window to see the label change!

This is the CSS. The screen sizes are based on Bootstrap 3 but can easily be changes to any kind of framework.

body::before {
	content: "X-SMALL";

	position: absolute;
	top: 0;
	left: 0;

	background-color: #fff;
	color: #000;
	font-weight: bold;
	padding: 4px 6px 2px 6px;
	border: 1px solid #d3d3d3;

	z-index: 10000;
}
 
@media (min-width: 480px) {		/* @screen-xs */
	body::before {
		content: "SMALL";
		background-color: #fbf;
	}
}
 
@media (min-width: 768px) {		/* @screen-sm */
	body::before {
		content: "MEDIUM";
		background-color: #bbf;
	}
}
 
@media (min-width: 992px) {		/* @screen-md */
	body::before {
		content: "LARGE";
		background-color: #bfb;
	}
}
 
@media (min-width: 1200px) {	/* @screen-lg */
	body::before {
		content: "X-LARGE";
		background-color: #fbb;
	}
}

body::before {

content: "X-SMALL";

position: absolute;

top: 0;

left: 0;

background-color: #fff;

color: #000;

font-weight: bold;

padding: 4px 6px 2px 6px;

border: 1px solid #d3d3d3;

z-index: 10000;

}

@media (min-width: 480px) { /* @screen-xs */

body::before {

content: "SMALL";

background-color: #fbf;

}

@media (min-width: 768px) { /* @screen-sm */

body::before {

content: "MEDIUM";

background-color: #bbf;

}

@media (min-width: 992px) { /* @screen-md */

body::before {

content: "LARGE";

background-color: #bfb;

}

@media (min-width: 1200px) { /* @screen-lg */

body::before {

content: "X-LARGE";

background-color: #fbb;

}

Note: The screen widths above are hard coded pixel sizes, so this CSS does not depend on any framework. To the right of each @media I have written the corresponsing Bootstrap LESS variable (@screen-xx). Replace the ###px with the variable to make sure it is always correct.

Posted in Development, Tips | Tagged bootstrap, css, responsive design, web, web development | Leave a comment

Parse Visio SVG drawings with Snap.svg

Posted on October 25, 2015 by Dan

This tutorial shows how to:

Load and work with SVG files using the Snap.svg JavaScript library.
Parse SVG drawings exported from Visio 2013 to read data and interact with the shapes.

To help with this I have exported a simple SVG from Visio that I will load into a web page and parse to get its data:

A screenshot of the sample Visio SVG that we will be working with in this tutorial. The box on the right displays metadata when hovering a shape.

In a Hurry?

Get code and sample file at GitHub

Background

Scalable Vector Graphics (SVG) is a W3C standard for displaying vector graphics in the web browser. Using JavaScript you can also interact with SVG files and their DOM, similar to the browser DOM. It is well supported by all browsers, although not that many developers actually know about the file format and its advantages.

Microsoft Visio can export its .vsd/.vsdx drawings and save as SVG images. This makes it easy to put Visio drawings on the web. For a work project I needed to load such images and display data extracted from the shapes in the drawings. I chose to use Snap.svg, which is a modern open source JavaScript library for working with SVG:s (think jQuery for SVG). I soon realized that there is lack of guidance though, both for working with Snap and for parsing Visio SVG:s. So after learning about it I decided to write a guide myself :-) This tutorial guides you in creating a basic framework to get started and perform typical tasks. I’ll begin by going through some of the more interesting points. Jump to the bottom to see the full code.

Note: The code snippets below may be slightly modified or out of context compared to the real code to make it easier to read.

Let’s get started!

Load and initialize drawings with Snap.svg

There are many ways to load SVG:s on a web page. I am using the <object> tag, which is usually the recommended way:

<object id="svg-object" data='VisioFlowchart.svg' type='image/svg+xml' width="100%"></object>

1	<object id="svg-object" data='VisioFlowchart.svg' type='image/svg+xml' width="100%"></object>

Using the jQuery load event (instead of the more common ready event) makes sure that the SVG file has been fully loaded before we begin to work with it:

$(window).on("load", function() { ... }

1	$(window).on("load", function() { ... }

We initialize Snap.svg and tell it to use the SVG in the <object> tag using its id:

var rootPaper = Snap("#svg-object");

1	var rootPaper = Snap("#svg-object");

You can have several SVG objects if you need to. Simply run run the initializer for each one in that case.

Tip: It is often useful to log Snap/SVG elements to the browser console during development, for example console.log(rootPaper). Since SVG is just XML the browser log will allow you to explore it, for example to figure out what selectors you need in order to locate the data you need.

Instead of using <object> tags, you can also load the SVG file using Snap.svg itself, and let Snap insert it into the page. Here is an example:

Snap.load(url, function (data) {
	var svgContainer = Snap("#some-empty-div-on-the-page");
	svgContainer.append(data);
	svgPaper = Snap(svgContainer.node.firstElementChild);
}

Snap.load(url, function (data) {

var svgContainer = Snap("#some-empty-div-on-the-page");

svgContainer.append(data);

svgPaper = Snap(svgContainer.node.firstElementChild);

}

Note: This method does not produce an identical DOM as the first initialization code. Some minor changes would be required in order to use the latter one with this tutorial.

Different ways of loading SVG:s have their advantages and disadvantages. Often what you choose is just a matter of taste. But I have also found that server settings can be cause trouble. In my case, the SharePoint Online server used response header “X-Download-Options: noopen” which forces non-recognized files to be saved instead of displayed/embedded. Since I couldn’t edit the server settings myself, letting Snap.svg load the file instead solved the problem.

Verify the file format

We can verify that this file is actually a Visio SVG by checking that it contains the proper namespace attribute (xlmns):

$(rootPaper.node.attributes).each( function(){
	if( this.value === "http://schemas.microsoft.com/visio/2003/SVGExtensions/" ) {
		isVisioSvg = true;
		return false; // breaks the jQuery each()
	}
});

$(rootPaper.node.attributes).each( function(){

if( this.value === "http://schemas.microsoft.com/visio/2003/SVGExtensions/" ) {

isVisioSvg = true;

return false; // breaks the jQuery each()

}

});

You’ll notice that above I’m using jQuery even though this is an SVG. You can actually do a lot of SVG parsing with jQuery, but because SVG:s use a separate namespace you may run into trouble. This is why a library such as Snap.svg is useful.

Reading Visio metadata

Microsoft Office files can contain a lot of metadata. Unfortunately it appears that only the “title” and “comment” is included when exporting SVG drawings. Other Visio metadata such as “tags” and “author” are nowhere to be found :-( Getting the title and comment (“desc”) is simple as they are stored at the root level in the xml:

$("#title").text("Title: " + rootPaper.select("title").node.textContent);
$("#comment").text("Comment: " + rootPaper.select("desc").node.textContent);

1 2	$("#title").text("Title: " + rootPaper.select("title").node.textContent); $("#comment").text("Comment: " + rootPaper.select("desc").node.textContent);

Removing SVG tooltips

Browsers will pick up the <title> tag of SVG elements and display as a tooltip. This can interfere with your own application, so we can remove the node from the SVG. However, the title is the only way to know what kind of Visio shape an SVG element is. Since this is of interest to us, I’m keeping a copy of it in an attribute instead!

rootPaper.selectAll("g").forEach( function(elm, i) {
	if(elm.select("title") && elm.select("title").node) {
		var type = elm.select("title").node.textContent; // get the title
		elm.attr("shapeType", type); // save the title in our own attribute
		elm.select("title").remove(); // remove the original title
	}
});

rootPaper.selectAll("g").forEach( function(elm, i) {

if(elm.select("title") && elm.select("title").node) {

var type = elm.select("title").node.textContent; // get the title

elm.attr("shapeType", type); // save the title in our own attribute

elm.select("title").remove(); // remove the original title

}

});

Seting up event handlers on Visio shapes

Event handlers in Snap are very similar to events in jQuery. First we iterate though the SVG elements, using the selector “g[id^=shape]” to match only Visio shapes:

rootPaper.selectAll("g[id^=shape]").forEach( function(elm, i) {

1	rootPaper.selectAll("g[id^=shape]").forEach( function(elm, i) {

Then simply hook up event handlers on each element (elm) just as in jQuery:

elm.click(function(evt) {...});
elm.mouseover(function(evt) {...});
elm.mouseout(function(evt) {...});

elm.click(function(evt) {...});

elm.mouseover(function(evt) {...});

elm.mouseout(function(evt) {...});

Just like in HTML, events bubble upwards through the hierarchy. In this case, the Visio “page” is at the top (or bottom if you like). We can easily stop event from bubbling:

evt.preventDefault();
evt.stopPropagation();

1 2	evt.preventDefault(); evt.stopPropagation();

Drawing a box around clicked shapes

When clicking a shape we can draw a box around it to indicate that it is selected. First, use Snap.svg to create a new rectangle element:

selectionRect = shape.paper.rect(shape.x, shape.y, shape.width, shape.height);

1	selectionRect = shape.paper.rect(shape.x, shape.y, shape.width, shape.height);

The new rectangle will not be visible unless we set some SVG style attributes. These are similar to HTML/CSS attributes, sometimes even named the same:

selectionRect.attr({fill: "none", stroke: "red", strokeWidth: 1});

1	selectionRect.attr({fill: "none", stroke: "red", strokeWidth: 1});

“fill” should be evident. “stroke” refers to the border around an SVG element.

Setting “pointerEvents” to none means that the mouse will not be able to click or hover the box like normal elements:

selectionRect.attr({pointerEvents: "none"});

1	selectionRect.attr({pointerEvents: "none"});

Now we can get boxes around the shapes! Unfortunately this is not as precise as you may be used to when working with CSS, so the box might look slightly off center. One reason for this is that getBBox() does not account for strokeWidth. I have yet to find a way to figure out the strokeWidth (especially in more complex shape-groups). You can try to set the “shapeRendering” attribute to get a better result:

selectionRect.attr({shapeRendering: "geometricPrecision"});

1	selectionRect.attr({shapeRendering: "geometricPrecision"});

This is a hint to the browser how we want shapes to be rendered. In this example, “geometricPrecision” appears to give best result. Also try “optimizeSpeed” and “crispEdges”.

Tip: Another way to “fix” the rendering problems would be to skip SVG altogether and use an HTML/CSS div instead. This gives a crisp pixel perfect box. Simply add a div and style it as needed, then position it on top of the SVG element:

<div id="selection" style="border: 1px solid black; display: inline-block; position: absolute; z-index: 100; pointer-events: none;"></div>
...
$("#selection").css("top", top + this.node.getBoundingClientRect().top);
$("#selection").css("left", left + this.node.getBoundingClientRect().left);
$("#selection").css("width", this.node.getBoundingClientRect().width);
$("#selection").css("height", this.node.getBoundingClientRect().height);

...

$("#selection").css("top", top + this.node.getBoundingClientRect().top);

$("#selection").css("left", left + this.node.getBoundingClientRect().left);

$("#selection").css("width", this.node.getBoundingClientRect().width);

$("#selection").css("height", this.node.getBoundingClientRect().height);

Highlighting hovered shapes

When hovering a shape with the mouse we want some kind of indication. One way is to set the shape’s opacity to 50%. We need to set both the fill and stroke opacity attributes:

hoveredShape.attr({fillOpacity: "0.5", strokeOpacity: "0.5"});

1	hoveredShape.attr({fillOpacity: "0.5", strokeOpacity: "0.5"});

Don’t forget to reset the opacity to 1 when leaving the shape!

This works fine in our example, where the background underneath the shape is plain. If there had been a pattern though, it would not look as good. A better way would be to clone the shape and display the clone semi-transparent above the original. Unfortunately I have not gotten this to work properly, because Visio shapes are complex elements put together of multiple parts.

Parsing Visio shapes

When clicking a Visio shape we want to extract the data contained within the shape. For this, I made a function that parses an xml element and returns an object with the data.

First, make sure that this is a shape element:

var elementType = elm.node.attributes["v:groupContext"].value;
if( elementType === "shape" ) { ... }

1 2	var elementType = elm.node.attributes["v:groupContext"].value; if( elementType === "shape" ) { ... }

Note: You may be wondering how I knew to look for “v:groupContext” and similar? I have not found any official documentation from Microsoft, but since SVG is an XML based format I simply inspected them in an ordinary text editor (in my case Notepad2) to figure out how they are constructed.

The shape type tells us what kind of Visio shape we are dealing with:

console.log( elm.node.attributes["shapeType"].value );

1	console.log( elm.node.attributes["shapeType"].value );

Note: “shapeType” is the attribute we previously created when we removed the tooltip.

Each shape has a id:

console.log( elm.node.attributes["id"].value );

1	console.log( elm.node.attributes["id"].value );

Note: This id is unique in the drawing, but if you edit your original Visio drawing and export it to SVG again, the id might change. There is also an attribute called “v:mID” that you can use to identify shapes. In my experience, this appears to be more reliable to use.

To get the shape’s position we query the getBBox() function:

console.log( elm.getBBox().x );
console.log( elm.getBBox().y );
console.log( elm.getBBox().width );
console.log( elm.getBBox().height );

console.log( elm.getBBox().x );

console.log( elm.getBBox().y );

console.log( elm.getBBox().width );

console.log( elm.getBBox().height );

Note: Shape position is relative to the SVG coordinates, not the screen/browser!

Get the text inside the shape:

if(elm.select("desc") && elm.select("desc").node) {
	console.log( elm.select("desc").node.textContent );
}

if(elm.select("desc") && elm.select("desc").node) {

console.log( elm.select("desc").node.textContent );

}

In Visio, you can right click on a shape and select properties to view and edit the “Custom Properties” of the shape. This is how to extract them:

if( elm.select("custProps") ) {
	var visioProps = elm.select("custProps").selectAll("cp");
	for(var i=0; i<visioProps.length; i++) {
		if( visioProps[i].node.attributes["v:nameU"]  &&  visioProps[i].node.attributes["v:val"] ) {
			console.log( "Key: " + visioProps[i].node.attributes["v:nameU"].value );
			console.log( "Value: " + visioProps[i].node.attributes["v:val"].value );
		}
	}
}

if( elm.select("custProps") ) {

var visioProps = elm.select("custProps").selectAll("cp");

for(var i=0; i<visioProps.length; i++) {

if( visioProps[i].node.attributes["v:nameU"] && visioProps[i].node.attributes["v:val"] ) {

console.log( "Key: " + visioProps[i].node.attributes["v:nameU"].value );

console.log( "Value: " + visioProps[i].node.attributes["v:val"].value );

}

There are also “User Defs” which are almost identical to work with as custom properties.

Resizing the SVG <object> container

We don’t know the aspect ratio of the drawing in advance. Assuming that we want to utilize the full width of the page, we can’t set the container height until we have the aspect ratio.

A Visio drawing can contain several pages. Only one page can be exported to SVG, but the concept of a page remains as the root element. We can get the bounding box of this Visio page:

rootPaper.selectAll("g").forEach(function(elm){			
	if(elm.node.attributes["v:groupContext"] && elm.node.attributes["v:groupContext"].value === "foregroundPage") {
		visioPage = elm.node;
		x = visioPage.getBBox().x;
		y = visioPage.getBBox().y;
		w = visioPage.getBBox().width;
		h = visioPage.getBBox().height;
	}
}

rootPaper.selectAll("g").forEach(function(elm){

if(elm.node.attributes["v:groupContext"] && elm.node.attributes["v:groupContext"].value === "foregroundPage") {

visioPage = elm.node;

x = visioPage.getBBox().x;

y = visioPage.getBBox().y;

w = visioPage.getBBox().width;

h = visioPage.getBBox().height;

}

Using this we can calculate the aspect ratio and change the height of the <object> container to show as much as possible of the drawing taking into account this aspect ratio:

$("#svg-object").height( $("#svg-object").width() / (w/h) );

1	$("#svg-object").height( $("#svg-object").width() / (w/h) );

Zooming in on the drawing

Visio adds a unnecessary empty border around the page. Let zoom in the drawing to better utilize the available space!

We can make a new viewBox to shows as much as possible of the drawing. I’m adding a small margin here, but it is quite inaccurate because getBBox() does not account for strokeWidth. Using a relative marginY appears to give descent result for my needs, but you may need to try something different yourself.

var marginX = 1;
var marginY = (w/h);
var newViewBox = (x-marginX) + " " + (y-marginY) + " " + (w+marginX*2) + " " + (h+marginY*2);

var marginX = 1;

var marginY = (w/h);

var newViewBox = (x-marginX) + " " + (y-marginY) + " " + (w+marginX*2) + " " + (h+marginY*2);

Note: The viewbox is a property of SVG that specifies what part of the drawing to display. The actual drawing can extend beyong this viewbox so you would have to pan the drawing to view it all.

Now we can use a new viewBox to resize the SVG to make it fill the entire object canvas:

rootPaper.animate({viewBox: newViewBox}, 300, mina.easeinout);

1	rootPaper.animate({viewBox: newViewBox}, 300, mina.easeinout);

Here I am also using Snap’s animation feature for a nice effect when loading the page. 300 is the animation duration, “mina.easeinout” is the animation easing. Other easings are: easeinout, linear, easein, easeout, backin, backout, elastic & bounce.

The complete code

I hope you enjoyed this tutorial and learned something new. Here is the complete, fully commented code, including the html/css page. Again, you can get this together with the sample SVG on GitHub.

<!doctype html>
<html>
<head>

	<script src="jquery.min.js"></script>
	<script src="snap.svg-min.js"></script>
	
	<style>
		body {
			background-color: #eee;
			font-family: sans-serif;
			font-size: 12px;
		}

		#title {
			font-size: 18px;
			font-weight: bold;
		}
		#comment {
			font-size: 12px;
			color: #888;
		}

		#svg-object {
			background-color: white;
			border: 1px dashed #aaa;
			float: left;
			width: 75%;
			vertical-align:top;	/* prevents spurious border below the SVG */
		 }

		.output {
			background-color: white;
			width: 20%;
			margin-left: 5px;
			float: left;
			border: 1px dashed #aaa;
			padding: 10px;
			float: left;
			pointer-events: none;
		}
		
		.output ul {
			padding-left: 20px;
		}
		
	</style>
	
</head>
<body>

	<div id="title"></div>
	<div id="comment"></div>

	<object id="svg-object" data='VisioFlowchart.svg' type='image/svg+xml' width="100%"></object>

	<div class="output">
		<ul id="output"></ul>
	</div>

	<script>
	
		// Using the jQuery load() event instead of the more common ready() event.
		// This makes sure that the SVG file has been fully loaded before we begin to work with it.
		$(window).on("load", function() {
			'use strict'

			var selectionRect, hoveredShape;
			
			// Initialize Snap.svg and tell it to use the SVG data in the <object> tag
			var rootPaper = Snap("#svg-object");

			// Instead of using <object> tags, you can also load SVG files using Snap.svg itself. Here is an example:
			/*
			Snap.load(url, function (data) {
				var svgContainer = Snap("#some-empty-div-on-the-page");
				svgContainer.append(data);
				svgPaper = Snap(svgContainer.node.firstElementChild);
			}
			*/
			// Note: If you want to use something like this instead, some minor changes to the code in this tutorial would be required.
			// Often what you choose is a matter of requirements and/or taste. But I have also found that server settings can be cause trouble. For example, SharePoint Online uses a response header for non-recognized files (such as SVG) that forces the browser to promt to save the file instead of allowing it to be embedded in an <object> tag. In this case, letting Snap load the file instead would solve the problem!



			// Verify that this is actually a Visio SVG
			var isVisioSvg = false;
			$(rootPaper.node.attributes).each( function(){
				if( this.value === "http://schemas.microsoft.com/visio/2003/SVGExtensions/" ) {
					isVisioSvg = true;
					return false; // breaks the jQuery each()
				}
			});
			if(!isVisioSvg) {
				console.log("Not a Visio SVG!");
				return;
			}

			// Tip: It is often useful to log Snap/SVG elements to the console. There you can examine the object to figure out what selectors you need in order to locate the data you need.
			console.log(rootPaper);

			// Get visio metadata
			// Unfortunately only the title and comment appears to be exported to SVG drawings. Other Visio metadata such as tags and author are nowhere to be found.
			$("#title").text( "Title: " + rootPaper.select("title").node.textContent );
			$("#comment").text( "Comment: " + rootPaper.select("desc").node.textContent );

			// Remove SVG tooltips
			rootPaper.selectAll("g").forEach( function(elm, i) {
				// Browsers will pick up the <title> tag and display as a tooltip. This can interfere with your own application, so we can remove it this way.
				// But the title tells us what kind of Visio shape it is, so we keep a copy of it in an atribute instead.
				if(elm.select("title") && elm.select("title").node) {
					var type = elm.select("title").node.textContent;
					elm.attr("shapeType", type);
					elm.select("title").remove();
				}

			});

			// Setup event handlers on shapes
			rootPaper.selectAll("g[id^=shape]").forEach( function(elm, i) {

				// Click event
				elm.click(function(evt) {
					
					// Call a helper function (see further down) to get the Visio shape clicked
					var shape = parseShapeElement(this);
					if(!shape) return;

					console.log("SVG Click");

					// Clear the previous selection box (if any)
					if(selectionRect) {
						selectionRect.remove();
					}

					// Draw a box around the selected shape
					// Unfortunately this is not as precise as one is used to when working with CSS, so the box might be slightly off
					// One reasone for this is that getBBox() does not account for strokeWidth, and I have yet to find a way to read this (especially in more complex shape-groups).
					selectionRect = shape.paper.rect(shape.x, shape.y, shape.width, shape.height);
					
					// The new selection rect will not be visible unless we set some SVG style attributes.
					// These are similar to HTML/CSS attributes, sometimes even idential.
					// Note that we are setting more than one attribute in a single call here.
					// "fill" should be evident. "stroke" refers to the border around an SVG element.
					selectionRect.attr({fill: "none", stroke: "red", strokeWidth: 1});

					// Setting "pointerEvents" to none means that the mouse will never be able to click/hover this element.
					selectionRect.attr({pointerEvents: "none"});
					
					// Setting the "shapeRendering" attribute allows to hint to the browser how shapes should rendered.
					// In this example, "geometricPrecision" appears to give best result. Also try "optimizeSpeed" and "crispEdges"
					selectionRect.attr({shapeRendering: "geometricPrecision"});

					// Finally stop the click event from bubbling up to the Visio "page"
					evt.preventDefault();
					evt.stopPropagation();
				});

				// Mouse hovering event
				elm.mouseover(function(evt) {

					var shape = parseShapeElement(this);
					if(!shape) return;
				
					// Set cursor to pointer to indicate that we can click on shapes
					// (We could have set this elsewhere; this was just a convenient place)
					elm.attr({cursor: "pointer"});

					// When hovering a shape we want some kind of indication.
					// Setting the shape opacity to 50% works fine in our example. Depending on the background underneath the shape this may not work though.
					// Alternatively we could have used a something similar to when selecting shapes, drawing a rectangle around it.
					// Ideally we would want to clone the shape and display on top. Unfortunately I have not gottent this to work properly. The problem likely stems from Visio shapes being complex elements put together of multiple parts.
					if(hoveredShape) {
						// First reset any previous shape that we hovered
						hoveredShape.attr({fillOpacity: "1", strokeOpacity: "1"});
					}
					// Set the opacity attributes to 50% on the current hovered shape
					hoveredShape = this;
					this.attr({fillOpacity: "0.5", strokeOpacity: "0.5"});

					// Print data found in the Visio shape to the output panel 
					// To see how these were obtained, see parseShapeElement() below
					$("#output").empty();
					if(shape) {
						$("#output").append( $("<h3>Shape Data</h3>") );
						$("#output").append( $("<li><b>" + "ID:</b> " + shape.id + "</li>") );
						$("#output").append( $("<li><b>" + "Type:</b> " + shape.type + "</li>") );
						$("#output").append( $("<li><b>" + "Text:</b> " + shape.text + "</li>") );
						
						var keys, i;
						
						$("#output").append( $("<br><h3>Custom Properties:</h3>") );
						keys = Object.getOwnPropertyNames(shape.props);
						for(i=0; i<keys.length; i++) {
							$("#output").append( $("<li><b>" + keys[i] + ":</b> " + shape.props[keys[i]] + "</li>") );
						}

						$("#output").append( $("<br><h3>User Defs:</h3>") );
						keys = Object.getOwnPropertyNames(shape.defs);
						for(i=0; i<keys.length; i++) {
							$("#output").append( $("<li><b>" + keys[i] + ":</b> " + shape.defs[keys[i]] + "</li>") );
						}
					}
					else {
						$("#output").append( $("<i>Not a shape...</i>") );
					}
				});
				
				// Mouse leave event
				elm.mouseout(function(evt) {
					// Reset a few things when the mouse is no longer hovering the shape
					$("#output").empty();
					if(hoveredShape) {
						hoveredShape.attr({fillOpacity: "1", strokeOpacity: "1"});
						hoveredShape = null;
					}
				});
				
			});

			// Also add a click event handler to the background
			rootPaper.click(function(evt) {
				console.log("SVG Click on Paper");
				if(selectionRect) {
					selectionRect.remove();
				}
			});

			// End SVG event handler setup
			

			// This helper function will take an element and try to parse it as a Visio shape
			// It will return a new object with the properties we are interested in
			function parseShapeElement(elm) {

				// Figuring out where things are located in Visio SVG:s and what they are named, such as "v:groupContext" was done by inspecting examples in and ordinary text editor
				var elementType = elm.node.attributes["v:groupContext"].value;
				if( elementType === "shape" ) {

					// Create the object to hold all data we collect
					var shape = {};

					// The shape type tells us what kind of Visio shape we are dealing with
					shape.type = elm.node.attributes["shapeType"].value;

					// Make sure this Visio shape is of interest to us.
					// "dynamic connector" corresponds to arrows
					// "sheet" can be the background or container objects
					var doNotProcess = ["sheet", "dynamic connector"];
					var type = shape.type.toLowerCase();
					for(var i=0; i<doNotProcess.length; i++) {
						if(type.indexOf(doNotProcess[i]) !== -1) {
							return null;
						}
					}

					// Let begin collecting data!
					shape.paper = elm.paper;
					
					// Each shape has a unique id
					shape.id = elm.node.attributes["id"].value;
					
					// Shape position is relative to the SVG coordinates, not the screen/browser
					shape.x = elm.getBBox().x;
					shape.y = elm.getBBox().y;
					shape.width = elm.getBBox().width;
					shape.height = elm.getBBox().height;

					// Get the text inside the shape
					shape.text = "";
					if(elm.select("desc") && elm.select("desc").node) {
						shape.text = elm.select("desc").node.textContent;
					}

					// Get "Custom Properties" of the shape
					// In Visio, right click on a shape and select properteis to view/edit these
					shape.props = {};
					if( elm.select("custProps") ) {
						var visioProps = elm.select("custProps").selectAll("cp");
						for(var i=0; i<visioProps.length; i++) {
							if( visioProps[i].node.attributes["v:nameU"]  &&  visioProps[i].node.attributes["v:val"] ) {
								shape.props[visioProps[i].node.attributes["v:nameU"].value] = visioProps[i].node.attributes["v:val"].value;
							}
						}
					}
					
					// Get "User Defs" (whatever that is...)
					shape.defs = {};
					if( elm.select("userDefs") ) {
						var visioDefs = elm.select("userDefs").selectAll("ud");
						for(var i=0; i<visioDefs.length; i++) {
							if( visioDefs[i].node.attributes["v:nameU"]  &&  visioDefs[i].node.attributes["v:val"] ) {
								shape.defs[visioDefs[i].node.attributes["v:nameU"].value] = visioDefs[i].node.attributes["v:val"].value;
							}
						}
					}
										
					return shape;
				} 
				else {
					// Not a Visio shape
					return null;
				}
			}


			// Visio will add an empty border around the Visio page in the SVG
			// This function will try to fit the SVG as best can in its container to show as much as possible of the drawing
			// It will also resize the container to make the most of the available space
			// All this while preserving aspect ratio of the SVG
			function resizeSvgAndContainer(objectElementId) {

				// Get the container
				var objectElement = $(objectElementId);

				// Get bounding box of the (Visio) page
				rootPaper.selectAll("g").forEach(function(elm){			
					if(elm.node.attributes["v:groupContext"] && elm.node.attributes["v:groupContext"].value === "foregroundPage") {
					
						var visioPage = elm.node;
						
						// The "Bounding Box" contains information about an SVG element's position
						var x = visioPage.getBBox().x;
						var y = visioPage.getBBox().y;
						var w = visioPage.getBBox().width;
						var h = visioPage.getBBox().height;

						// Figure out a new viewBox that shows as much as possible of the drawing
						// The viewbox is a property of SVG that specifies what part of the drawing to display. The actual drawing can extend beyong this viewbox so you would have to pan the drawing to view it all.
						// It is not perfect. This is probably because getBBox does not include account for strokeWidth, and I have yet to find out a way to figure this out.
						// This can cause shapes to be clipped. I am adding marging to the new viewbox to try and fix this. Using a relative marginY appears to give decent result for most of my needs. You may need to try something different yourself.
						var marginX = 1;
						var marginY = (w/h);
						var newViewBox = (x-marginX) + " " + (y-marginY) + " " + (w+marginX*2) + " " + (h+marginY*2);

						// The width of the container is fixed. But we can alter the height to show as much as possible of the drawing at its specified aspect ratio.
						objectElement.height( objectElement.width() / (w/h) );

						// Set SVG to make Visio page fill entire object canvas
						// Here I am also using Snap's animation feature for a nice effect when loading the page
						// 300 is the animation duration, "mina.easeinout" is the animation easing. Other easings are: easeinout, linear, easein, easeout, backin, backout, elastic & bounce.
						rootPaper.animate({viewBox: newViewBox}, 300, mina.easeinout);
					}
				});			
			}
			
			// Call the resize function at startup
			resizeSvgAndContainer("#svg-object");
			// Also register an event handler if window should resize in the future
			$(window).resize(function () {
				resizeSvgAndContainer("#svg-object");
			});

		});
	
	</script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

<!doctype html>

<html>

<head>

<style>

body {

background-color: #eee;

font-family: sans-serif;

font-size: 12px;

}

#title {

font-size: 18px;

font-weight: bold;

}

#comment {

font-size: 12px;

color: #888;

}

#svg-object {

background-color: white;

border: 1px dashed #aaa;

float: left;

width: 75%;

vertical-align:top; /* prevents spurious border below the SVG */

}

.output {

background-color: white;

width: 20%;

margin-left: 5px;

float: left;

border: 1px dashed #aaa;

padding: 10px;

float: left;

pointer-events: none;

}

.output ul {

padding-left: 20px;

}

</style>

</head>

<body>

</div>

// Using the jQuery load() event instead of the more common ready() event.

// This makes sure that the SVG file has been fully loaded before we begin to work with it.

$(window).on("load", function() {

'use strict'

var selectionRect, hoveredShape;

// Initialize Snap.svg and tell it to use the SVG data in the <object> tag

var rootPaper = Snap("#svg-object");

// Instead of using <object> tags, you can also load SVG files using Snap.svg itself. Here is an example:

Snap.load(url, function (data) {

var svgContainer = Snap("#some-empty-div-on-the-page");

svgContainer.append(data);

svgPaper = Snap(svgContainer.node.firstElementChild);

}

// Note: If you want to use something like this instead, some minor changes to the code in this tutorial would be required.

// Often what you choose is a matter of requirements and/or taste. But I have also found that server settings can be cause trouble. For example, SharePoint Online uses a response header for non-recognized files (such as SVG) that forces the browser to promt to save the file instead of allowing it to be embedded in an <object> tag. In this case, letting Snap load the file instead would solve the problem!

// Verify that this is actually a Visio SVG

var isVisioSvg = false;

$(rootPaper.node.attributes).each( function(){

if( this.value === "http://schemas.microsoft.com/visio/2003/SVGExtensions/" ) {

isVisioSvg = true;

return false; // breaks the jQuery each()

}

});

if(!isVisioSvg) {

console.log("Not a Visio SVG!");

return;

}

// Tip: It is often useful to log Snap/SVG elements to the console. There you can examine the object to figure out what selectors you need in order to locate the data you need.

console.log(rootPaper);

// Get visio metadata

// Unfortunately only the title and comment appears to be exported to SVG drawings. Other Visio metadata such as tags and author are nowhere to be found.

$("#title").text( "Title: " + rootPaper.select("title").node.textContent );

$("#comment").text( "Comment: " + rootPaper.select("desc").node.textContent );

// Remove SVG tooltips

rootPaper.selectAll("g").forEach( function(elm, i) {

// Browsers will pick up the <title> tag and display as a tooltip. This can interfere with your own application, so we can remove it this way.

// But the title tells us what kind of Visio shape it is, so we keep a copy of it in an atribute instead.

if(elm.select("title") && elm.select("title").node) {

var type = elm.select("title").node.textContent;

elm.attr("shapeType", type);

elm.select("title").remove();

}

});

// Setup event handlers on shapes

rootPaper.selectAll("g[id^=shape]").forEach( function(elm, i) {

// Click event

elm.click(function(evt) {

// Call a helper function (see further down) to get the Visio shape clicked

var shape = parseShapeElement(this);

if(!shape) return;

console.log("SVG Click");

// Clear the previous selection box (if any)

if(selectionRect) {

selectionRect.remove();

}

// Draw a box around the selected shape

// Unfortunately this is not as precise as one is used to when working with CSS, so the box might be slightly off

// One reasone for this is that getBBox() does not account for strokeWidth, and I have yet to find a way to read this (especially in more complex shape-groups).

selectionRect = shape.paper.rect(shape.x, shape.y, shape.width, shape.height);

// The new selection rect will not be visible unless we set some SVG style attributes.

// These are similar to HTML/CSS attributes, sometimes even idential.

// Note that we are setting more than one attribute in a single call here.

// "fill" should be evident. "stroke" refers to the border around an SVG element.

selectionRect.attr({fill: "none", stroke: "red", strokeWidth: 1});

// Setting "pointerEvents" to none means that the mouse will never be able to click/hover this element.

selectionRect.attr({pointerEvents: "none"});

// Setting the "shapeRendering" attribute allows to hint to the browser how shapes should rendered.

// In this example, "geometricPrecision" appears to give best result. Also try "optimizeSpeed" and "crispEdges"

selectionRect.attr({shapeRendering: "geometricPrecision"});

// Finally stop the click event from bubbling up to the Visio "page"

evt.preventDefault();

evt.stopPropagation();

});

// Mouse hovering event

elm.mouseover(function(evt) {

var shape = parseShapeElement(this);

if(!shape) return;

// Set cursor to pointer to indicate that we can click on shapes

// (We could have set this elsewhere; this was just a convenient place)

elm.attr({cursor: "pointer"});

// When hovering a shape we want some kind of indication.

// Setting the shape opacity to 50% works fine in our example. Depending on the background underneath the shape this may not work though.

// Alternatively we could have used a something similar to when selecting shapes, drawing a rectangle around it.

// Ideally we would want to clone the shape and display on top. Unfortunately I have not gottent this to work properly. The problem likely stems from Visio shapes being complex elements put together of multiple parts.

if(hoveredShape) {

// First reset any previous shape that we hovered

hoveredShape.attr({fillOpacity: "1", strokeOpacity: "1"});

}

// Set the opacity attributes to 50% on the current hovered shape

hoveredShape = this;

this.attr({fillOpacity: "0.5", strokeOpacity: "0.5"});

// Print data found in the Visio shape to the output panel

// To see how these were obtained, see parseShapeElement() below

$("#output").empty();

if(shape) {

$("#output").append( $("<h3>Shape Data</h3>") );

$("#output").append( $("<li><b>" + "ID:</b> " + shape.id + "</li>") );

$("#output").append( $("<li><b>" + "Type:</b> " + shape.type + "</li>") );

$("#output").append( $("<li><b>" + "Text:</b> " + shape.text + "</li>") );

var keys, i;

$("#output").append( $("<br><h3>Custom Properties:</h3>") );

keys = Object.getOwnPropertyNames(shape.props);

for(i=0; i<keys.length; i++) {

$("#output").append( $("<li><b>" + keys[i] + ":</b> " + shape.props[keys[i]] + "</li>") );

}

$("#output").append( $("<br><h3>User Defs:</h3>") );

keys = Object.getOwnPropertyNames(shape.defs);

for(i=0; i<keys.length; i++) {

$("#output").append( $("<li><b>" + keys[i] + ":</b> " + shape.defs[keys[i]] + "</li>") );

}

else {

$("#output").append( $("<i>Not a shape...</i>") );

}

});

// Mouse leave event

elm.mouseout(function(evt) {

// Reset a few things when the mouse is no longer hovering the shape

$("#output").empty();

if(hoveredShape) {

hoveredShape.attr({fillOpacity: "1", strokeOpacity: "1"});

hoveredShape = null;

}

});

// Also add a click event handler to the background

rootPaper.click(function(evt) {

console.log("SVG Click on Paper");

if(selectionRect) {

selectionRect.remove();

}

});

// End SVG event handler setup

// This helper function will take an element and try to parse it as a Visio shape

// It will return a new object with the properties we are interested in

function parseShapeElement(elm) {

// Figuring out where things are located in Visio SVG:s and what they are named, such as "v:groupContext" was done by inspecting examples in and ordinary text editor

var elementType = elm.node.attributes["v:groupContext"].value;

if( elementType === "shape" ) {

// Create the object to hold all data we collect

var shape = {};

// The shape type tells us what kind of Visio shape we are dealing with

shape.type = elm.node.attributes["shapeType"].value;

// Make sure this Visio shape is of interest to us.

// "dynamic connector" corresponds to arrows

// "sheet" can be the background or container objects

var doNotProcess = ["sheet", "dynamic connector"];

var type = shape.type.toLowerCase();

for(var i=0; i<doNotProcess.length; i++) {

if(type.indexOf(doNotProcess[i]) !== -1) {

return null;

}

// Let begin collecting data!

shape.paper = elm.paper;

// Each shape has a unique id

shape.id = elm.node.attributes["id"].value;

// Shape position is relative to the SVG coordinates, not the screen/browser

shape.x = elm.getBBox().x;

shape.y = elm.getBBox().y;

shape.width = elm.getBBox().width;

shape.height = elm.getBBox().height;

// Get the text inside the shape

shape.text = "";

if(elm.select("desc") && elm.select("desc").node) {

shape.text = elm.select("desc").node.textContent;

}

// Get "Custom Properties" of the shape

// In Visio, right click on a shape and select properteis to view/edit these

shape.props = {};

if( elm.select("custProps") ) {

var visioProps = elm.select("custProps").selectAll("cp");

for(var i=0; i<visioProps.length; i++) {

if( visioProps[i].node.attributes["v:nameU"] && visioProps[i].node.attributes["v:val"] ) {

shape.props[visioProps[i].node.attributes["v:nameU"].value] = visioProps[i].node.attributes["v:val"].value;

}

// Get "User Defs" (whatever that is...)

shape.defs = {};

if( elm.select("userDefs") ) {

var visioDefs = elm.select("userDefs").selectAll("ud");

for(var i=0; i<visioDefs.length; i++) {

if( visioDefs[i].node.attributes["v:nameU"] && visioDefs[i].node.attributes["v:val"] ) {

shape.defs[visioDefs[i].node.attributes["v:nameU"].value] = visioDefs[i].node.attributes["v:val"].value;

}

return shape;

}

else {

// Not a Visio shape

return null;

}

// Visio will add an empty border around the Visio page in the SVG

// This function will try to fit the SVG as best can in its container to show as much as possible of the drawing

// It will also resize the container to make the most of the available space

// All this while preserving aspect ratio of the SVG

function resizeSvgAndContainer(objectElementId) {

// Get the container

var objectElement = $(objectElementId);

// Get bounding box of the (Visio) page

rootPaper.selectAll("g").forEach(function(elm){

if(elm.node.attributes["v:groupContext"] && elm.node.attributes["v:groupContext"].value === "foregroundPage") {

var visioPage = elm.node;

// The "Bounding Box" contains information about an SVG element's position

var x = visioPage.getBBox().x;

var y = visioPage.getBBox().y;

var w = visioPage.getBBox().width;

var h = visioPage.getBBox().height;

// Figure out a new viewBox that shows as much as possible of the drawing

// The viewbox is a property of SVG that specifies what part of the drawing to display. The actual drawing can extend beyong this viewbox so you would have to pan the drawing to view it all.

// It is not perfect. This is probably because getBBox does not include account for strokeWidth, and I have yet to find out a way to figure this out.

// This can cause shapes to be clipped. I am adding marging to the new viewbox to try and fix this. Using a relative marginY appears to give decent result for most of my needs. You may need to try something different yourself.

var marginX = 1;

var marginY = (w/h);

var newViewBox = (x-marginX) + " " + (y-marginY) + " " + (w+marginX*2) + " " + (h+marginY*2);

// The width of the container is fixed. But we can alter the height to show as much as possible of the drawing at its specified aspect ratio.

objectElement.height( objectElement.width() / (w/h) );

// Set SVG to make Visio page fill entire object canvas

// Here I am also using Snap's animation feature for a nice effect when loading the page

// 300 is the animation duration, "mina.easeinout" is the animation easing. Other easings are: easeinout, linear, easein, easeout, backin, backout, elastic & bounce.

rootPaper.animate({viewBox: newViewBox}, 300, mina.easeinout);

}

});

}

// Call the resize function at startup

resizeSvgAndContainer("#svg-object");

// Also register an event handler if window should resize in the future

$(window).resize(function () {

resizeSvgAndContainer("#svg-object");

});

</script>

</body>

</html>

Posted in Development, Tutorials | Tagged javascript, metadata, microsoft, microsoft office, sharepoint online, snap.svg, svg, tutorial, vector graphics, visio, web development | 9 Comments

Why image renditions are slow in SharePoint Online

Posted on October 22, 2015 by Dan

Image renditions are supposed to be a great way to speed up SharePoint. But if you’ve ever tried to use them in SharePoint Online you have probably noticed that the images load very slow. It’s usually even faster to get the original high resolution image instead. If you look at the network requests, you’ll see that most of the time the browser is just waiting for the server to respond. Actually downloading the image data takes no time at all. But why?

This is what I think is happening: Image renditions rely on front end caching. But SharePoint Online is a huge farm with lots and lots of front ends. When you request an image rendition it will be generated and cached. But the next time you make a request for the same image rendition, the probability that you get a cache hit is very small. You will probably be served by another front end server, and even if you are served by the same server, it handles so many requests that your image rendition has already been dropped from the cache.

Thanks to my friend Dan Andersson for helping me figure out this.

Posted in Development | Tagged image renditions, sharepoint online | 2 Comments

Edit SharePoint property bags with SpPropertyBag.js bookmarklet

Posted on October 5, 2015 by Dan

SpPropertyBag.js is a drop-in JavaScript for editing SharePoint web properties (the “property bag”). Simply paste the script into the JavaScript console and run it to open a dialog where you can view, edit, add, and remove properties:

Even easier is to use it as a bookmarklet in your web browser that you can click when you need access to the web properties! Simply paste this code into a new link in your browser’s toolbar:

javascript:(function()%7Bwindow.spPropertyBag%3D%7B%7D%2Cwindow.spPropertyBag.init%3Dfunction()%7B%22use%20strict%22%3Bfunction%20e(e)%7Bvar%20t%2Co%2Cn%3D%5B%5D%3Bfor(t%20in%20e)e.hasOwnProperty(t)%26%26(o%3Dtypeof%20e%5Bt%5D%2C%22string%22%3D%3D%3Do%26%26n.push(%7Bprop%3At%2Cvalue%3Ae%5Bt%5D.replace(%2F%22%2Fg%2C%22%26quot%3B%22)%7D))%3Bn.sort(function(e%2Ct)%7Breturn%20e.prop.localeCompare(t.prop)%7D)%3Bvar%20p%2Ci%3Ddocument.createElement(%22div%22)%2Cd%3D'%3Chr%3E%3Ctable%20style%3D%22margin%3A%201em%3B%22%3E'%3Bfor(p%3D0%3Bp%3Cn.length%3Bp%2B%2B)d%2B%3D%22%3Ctr%3E%22%2Cd%2B%3D'%3Ctd%20style%3D%22text-align%3A%20right%3B%20padding-top%3A%2015px%3B%22%3E%3Cb%3E'%2Bn%5Bp%5D.prop%2B%22%3C%2Fb%3E%3C%2Ftd%3E%22%2Cd%2B%3D'%3Ctd%20style%3D%22padding-top%3A%2015px%3B%22%3E%3Cinput%20id%3D%22prop'%2Bp%2B'%22%20style%3D%22width%3A240px%3B%20%22%20type%3D%22text%22%20value%3D%22'%2Bn%5Bp%5D.value%2B'%22%3E%3C%2Finpu%3E%3C%2Ftd%3E'%2Cd%2B%3D'%3Ctd%20style%3D%22padding-top%3A%2015px%3B%22%3E%3Cbutton%20onclick%3D%22window.spPropertyBag.setProperty(%5C''%2Bn%5Bp%5D.prop%2B%22'%2C'prop%22%2Bp%2B%22')%3B%20return%20false%3B%5C%22%3EUpdate%3C%2Fbutton%3E%3C%2Ftd%3E%22%2Cd%2B%3D'%3Ctd%20style%3D%22padding-top%3A%2015px%3B%22%3E%3Cbutton%20style%3D%22color%3A%20red%3B%20min-width%3A%201em%3B%22%20onclick%3D%22window.spPropertyBag.deleteProperty(%5C''%2Bn%5Bp%5D.prop%2B%22'%2C'prop%22%2Bp%2B%22')%3B%20return%20false%3B%5C%22%3EX%3C%2Fbutton%3E%3C%2Ftd%3E%22%2Cd%2B%3D%22%3C%2Ftr%3E%22%3Bd%2B%3D%22%3C%2Ftable%3E%22%2Cd%2B%3D%22%3Chr%3E%3Ch3%3EAdd%20a%20new%20property%3A%3C%2Fh3%3E%22%2Cd%2B%3D'%3Cdiv%20style%3D%22margin%3A%201em%3B%20padding-bottom%3A%202em%3B%22%3EKey%3A%20%3Cinput%20id%3D%22newKey%22%3E%3C%2Finpu%3E'%2Cd%2B%3D'%26nbsp%3B%26nbsp%3B%26nbsp%3BValue%3A%20%3Cinput%20id%3D%22newValue%22%3E%3C%2Finpu%3E'%2Cd%2B%3D'%26nbsp%3B%3Cbutton%20onclick%3D%22window.spPropertyBag.addProperty()%3B%20return%20false%3B%22%3EAdd%3C%2Fbutton%3E%3C%2Fdiv%3E'%2Cd%2B%3D%22%3Cdiv%3E%3C%2Fdiv%3E%22%2Ci.innerHTML%3Dd%2COpenPopUpPageWithDialogOptions(%7Btitle%3A%22Property%20Bag%20Editor%22%2Chtml%3Ai%2CallowMaximized%3A!0%2CshowClose%3A!0%2CautoSize%3A!0%2CdialogReturnValueCallback%3Afunction()%7Br%26%26window.location.reload()%7D%7D)%7Dvar%20t%3Dnew%20SP.ClientContext.get_current%2Co%3Dt.get_web()%2Cn%3Do.get_allProperties()%3Bt.load(o)%2Ct.load(n)%3Bvar%20r%3D!1%3Bt.executeQueryAsync(function()%7Be(n.get_fieldValues())%7D%2Cfunction(e%2Ct)%7BSP.UI.Notify.addNotification(%22Failed%20to%20get%20web%20properties...%3Cbr%3E%22%2Bt.get_message())%7D)%2Cwindow.spPropertyBag.executeChanges%3Dfunction()%7Bt.get_web().update()%2Ct.executeQueryAsync(function()%7Bconsole.log(%22Web%20properties%20successfully%20modified%22)%7D%2Cfunction()%7Bconsole.error(%22Failed%20to%20set%20web%20property!%22)%7D)%7D%2Cwindow.spPropertyBag.setProperty%3Dfunction(e%2Ct)%7Bvar%20o%3Ddocument.getElementById(t).value%3Bn.set_item(e%2Co)%2Cwindow.spPropertyBag.executeChanges()%7D%2Cwindow.spPropertyBag.deleteProperty%3Dfunction(e%2Ct)%7Bif(confirm(%22Are%20you%20sure%20you%20want%20to%20remove%20this%20property%3F%22))%7Bvar%20o%3Ddocument.getElementById(t).parentNode.parentNode%3Bo.parentNode.removeChild(o)%2Cn.set_item(e)%2Cwindow.spPropertyBag.executeChanges()%2Cr%3D!0%7D%7D%2Cwindow.spPropertyBag.addProperty%3Dfunction()%7Bvar%20e%3Ddocument.getElementById(%22newKey%22).value%2Ct%3Ddocument.getElementById(%22newValue%22).value%3Bdocument.getElementById(%22newValue%22).value%3D%22%22%2Cdocument.getElementById(%22newKey%22).value%3D%22%22%2Cn.set_item(e%2Ct)%2Cwindow.spPropertyBag.executeChanges()%7D%7D%2Cwindow.spPropertyBag.init()%7D)()

javascript:(function()%7Bwindow.spPropertyBag%3D%7B%7D%2Cwindow.spPropertyBag.init%3Dfunction()%7B%22use%20strict%22%3Bfunction%20e(e)%7Bvar%20t%2Co%2Cn%3D%5B%5D%3Bfor(t%20in%20e)e.hasOwnProperty(t)%26%26(o%3Dtypeof%20e%5Bt%5D%2C%22string%22%3D%3D%3Do%26%26n.push(%7Bprop%3At%2Cvalue%3Ae%5Bt%5D.replace(%2F%22%2Fg%2C%22%26quot%3B%22)%7D))%3Bn.sort(function(e%2Ct)%7Breturn%20e.prop.localeCompare(t.prop)%7D)%3Bvar%20p%2Ci%3Ddocument.createElement(%22div%22)%2Cd%3D'%3Chr%3E%3Ctable%20style%3D%22margin%3A%201em%3B%22%3E'%3Bfor(p%3D0%3Bp%3Cn.length%3Bp%2B%2B)d%2B%3D%22%3Ctr%3E%22%2Cd%2B%3D'%3Ctd%20style%3D%22text-align%3A%20right%3B%20padding-top%3A%2015px%3B%22%3E%3Cb%3E'%2Bn%5Bp%5D.prop%2B%22%3C%2Fb%3E%3C%2Ftd%3E%22%2Cd%2B%3D'%3Ctd%20style%3D%22padding-top%3A%2015px%3B%22%3E%3Cinput%20id%3D%22prop'%2Bp%2B'%22%20style%3D%22width%3A240px%3B%20%22%20type%3D%22text%22%20value%3D%22'%2Bn%5Bp%5D.value%2B'%22%3E%3C%2Finpu%3E%3C%2Ftd%3E'%2Cd%2B%3D'%3Ctd%20style%3D%22padding-top%3A%2015px%3B%22%3E%3Cbutton%20onclick%3D%22window.spPropertyBag.setProperty(%5C''%2Bn%5Bp%5D.prop%2B%22'%2C'prop%22%2Bp%2B%22')%3B%20return%20false%3B%5C%22%3EUpdate%3C%2Fbutton%3E%3C%2Ftd%3E%22%2Cd%2B%3D'%3Ctd%20style%3D%22padding-top%3A%2015px%3B%22%3E%3Cbutton%20style%3D%22color%3A%20red%3B%20min-width%3A%201em%3B%22%20onclick%3D%22window.spPropertyBag.deleteProperty(%5C''%2Bn%5Bp%5D.prop%2B%22'%2C'prop%22%2Bp%2B%22')%3B%20return%20false%3B%5C%22%3EX%3C%2Fbutton%3E%3C%2Ftd%3E%22%2Cd%2B%3D%22%3C%2Ftr%3E%22%3Bd%2B%3D%22%3C%2Ftable%3E%22%2Cd%2B%3D%22%3Chr%3E%3Ch3%3EAdd%20a%20new%20property%3A%3C%2Fh3%3E%22%2Cd%2B%3D'%3Cdiv%20style%3D%22margin%3A%201em%3B%20padding-bottom%3A%202em%3B%22%3EKey%3A%20%3Cinput%20id%3D%22newKey%22%3E%3C%2Finpu%3E'%2Cd%2B%3D'%26nbsp%3B%26nbsp%3B%26nbsp%3BValue%3A%20%3Cinput%20id%3D%22newValue%22%3E%3C%2Finpu%3E'%2Cd%2B%3D'%26nbsp%3B%3Cbutton%20onclick%3D%22window.spPropertyBag.addProperty()%3B%20return%20false%3B%22%3EAdd%3C%2Fbutton%3E%3C%2Fdiv%3E'%2Cd%2B%3D%22%3Cdiv%3E%3C%2Fdiv%3E%22%2Ci.innerHTML%3Dd%2COpenPopUpPageWithDialogOptions(%7Btitle%3A%22Property%20Bag%20Editor%22%2Chtml%3Ai%2CallowMaximized%3A!0%2CshowClose%3A!0%2CautoSize%3A!0%2CdialogReturnValueCallback%3Afunction()%7Br%26%26window.location.reload()%7D%7D)%7Dvar%20t%3Dnew%20SP.ClientContext.get_current%2Co%3Dt.get_web()%2Cn%3Do.get_allProperties()%3Bt.load(o)%2Ct.load(n)%3Bvar%20r%3D!1%3Bt.executeQueryAsync(function()%7Be(n.get_fieldValues())%7D%2Cfunction(e%2Ct)%7BSP.UI.Notify.addNotification(%22Failed%20to%20get%20web%20properties...%3Cbr%3E%22%2Bt.get_message())%7D)%2Cwindow.spPropertyBag.executeChanges%3Dfunction()%7Bt.get_web().update()%2Ct.executeQueryAsync(function()%7Bconsole.log(%22Web%20properties%20successfully%20modified%22)%7D%2Cfunction()%7Bconsole.error(%22Failed%20to%20set%20web%20property!%22)%7D)%7D%2Cwindow.spPropertyBag.setProperty%3Dfunction(e%2Ct)%7Bvar%20o%3Ddocument.getElementById(t).value%3Bn.set_item(e%2Co)%2Cwindow.spPropertyBag.executeChanges()%7D%2Cwindow.spPropertyBag.deleteProperty%3Dfunction(e%2Ct)%7Bif(confirm(%22Are%20you%20sure%20you%20want%20to%20remove%20this%20property%3F%22))%7Bvar%20o%3Ddocument.getElementById(t).parentNode.parentNode%3Bo.parentNode.removeChild(o)%2Cn.set_item(e)%2Cwindow.spPropertyBag.executeChanges()%2Cr%3D!0%7D%7D%2Cwindow.spPropertyBag.addProperty%3Dfunction()%7Bvar%20e%3Ddocument.getElementById(%22newKey%22).value%2Ct%3Ddocument.getElementById(%22newValue%22).value%3Bdocument.getElementById(%22newValue%22).value%3D%22%22%2Cdocument.getElementById(%22newKey%22).value%3D%22%22%2Cn.set_item(e%2Ct)%2Cwindow.spPropertyBag.executeChanges()%7D%7D%2Cwindow.spPropertyBag.init()%7D)()

Here is the full script. It is also available for forking at GitHub.

/*
 * SpPropertyBag.js
 * by rlv-dan (https://github.com/rlv-dan)
 * License: GPL3
*/

window.spPropertyBag = {};
window.spPropertyBag.init = function() {
	"use strict";

	var ctx = new SP.ClientContext.get_current();
	var web = ctx.get_web();
	var allProperties = web.get_allProperties();
	ctx.load(web);
	ctx.load(allProperties);

	var reloadRequired = false;

	ctx.executeQueryAsync(function () {
		showPropertiesDialog(allProperties.get_fieldValues());
	}, function (req,err) {
		SP.UI.Notify.addNotification("Failed to get web properties...<br>" + err.get_message());
	});


	window.spPropertyBag.executeChanges = function() {
		ctx.get_web().update();
		ctx.executeQueryAsync(function () {
			console.log("Web properties successfully modified");
		}, function () {
			console.error("Failed to set web property!");
		});
	};
	window.spPropertyBag.setProperty = function(key, inputId) {
		var value = document.getElementById(inputId).value;
		allProperties.set_item(key, value);
		window.spPropertyBag.executeChanges();
	};
	window.spPropertyBag.deleteProperty = function(key, inputId) {
		if (confirm('Are you sure you want to remove this property?')) {
			var table = document.getElementById(inputId).parentNode.parentNode;
			table.parentNode.removeChild(table);

			allProperties.set_item(key);
			window.spPropertyBag.executeChanges();
			reloadRequired = true;
		}
	};
	window.spPropertyBag.addProperty = function() {
		var key = document.getElementById("newKey").value;
		var value = document.getElementById("newValue").value;
		document.getElementById("newValue").value = "";
		document.getElementById("newKey").value = "";
		allProperties.set_item(key, value);
		window.spPropertyBag.executeChanges();
	};

	function showPropertiesDialog(props) {
		var p, type;
		var items = [];
		for(p in props) {
			if (props.hasOwnProperty(p)) {
				type = typeof(props[p]);
				if(type === "string") {
					items.push({"prop": p, "value": props[p].replace(/"/g, '&quot;')});
				}
			}
		}
		items.sort(function(a, b) {
			return a.prop.localeCompare(b.prop);
		});


		var html = document.createElement('div');
		var h = '<hr><table style="margin: 1em;">';
		var i;
		for(i=0; i<items.length; i++) {
			h += '<tr>';
			h += '<td style="text-align: right; padding-top: 15px;"><b>' + items[i].prop + '</b></td>';
			h += '<td style="padding-top: 15px;"><input id="prop' + i + '" style="width:240px; " type="text" value="' + items[i].value + '"></inpu></td>';
			h += '<td style="padding-top: 15px;"><button onclick="window.spPropertyBag.setProperty(\'' + items[i].prop + '\',\'prop' + i +'\'); return false;">Update</button></td>';
			h += '<td style="padding-top: 15px;"><button style="color: red; min-width: 1em;" onclick="window.spPropertyBag.deleteProperty(\'' + items[i].prop + '\',\'prop' + i +'\'); return false;">X</button></td>';
			h += '</tr>';
		}
		h += '</table>';

		h += '<hr><h3>Add a new property:</h3>';
		h += '<div style="margin: 1em; padding-bottom: 2em;">Key: <input id="newKey"></inpu>';
		h += '&nbsp;&nbsp;&nbsp;Value: <input id="newValue"></inpu>';
		h += '&nbsp;<button onclick="window.spPropertyBag.addProperty(); return false;">Add</button></div>';
		h += '<div></div>';

		html.innerHTML = h;

		OpenPopUpPageWithDialogOptions({
		 title: "Property Bag Editor",
		 html:html,
		 allowMaximized: true,
		 showClose: true,
		 autoSize: true,
		 /*width: 800,*/
		 dialogReturnValueCallback: function(dialogResult) {
			if(reloadRequired){
				window.location.reload();
			}
		 }
		});
	}
};
window.spPropertyBag.init();

100

101

102

103

104

105

106

107

108

109

110

* SpPropertyBag.js

* by rlv-dan (https://github.com/rlv-dan)

* License: GPL3

window.spPropertyBag = {};

window.spPropertyBag.init = function() {

"use strict";

var ctx = new SP.ClientContext.get_current();

var web = ctx.get_web();

var allProperties = web.get_allProperties();

ctx.load(web);

ctx.load(allProperties);

var reloadRequired = false;

ctx.executeQueryAsync(function () {

showPropertiesDialog(allProperties.get_fieldValues());

}, function (req,err) {

SP.UI.Notify.addNotification("Failed to get web properties...<br>" + err.get_message());

});

window.spPropertyBag.executeChanges = function() {

ctx.get_web().update();

ctx.executeQueryAsync(function () {

console.log("Web properties successfully modified");

}, function () {

console.error("Failed to set web property!");

});

};

window.spPropertyBag.setProperty = function(key, inputId) {

var value = document.getElementById(inputId).value;

allProperties.set_item(key, value);

window.spPropertyBag.executeChanges();

};

window.spPropertyBag.deleteProperty = function(key, inputId) {

if (confirm('Are you sure you want to remove this property?')) {

var table = document.getElementById(inputId).parentNode.parentNode;

table.parentNode.removeChild(table);

allProperties.set_item(key);

window.spPropertyBag.executeChanges();

reloadRequired = true;

}

};

window.spPropertyBag.addProperty = function() {

var key = document.getElementById("newKey").value;

var value = document.getElementById("newValue").value;

document.getElementById("newValue").value = "";

document.getElementById("newKey").value = "";

allProperties.set_item(key, value);

window.spPropertyBag.executeChanges();

};

function showPropertiesDialog(props) {

var p, type;

var items = [];

for(p in props) {

if (props.hasOwnProperty(p)) {

type = typeof(props[p]);

if(type === "string") {

items.push({"prop": p, "value": props[p].replace(/"/g, '"')});

}

items.sort(function(a, b) {

return a.prop.localeCompare(b.prop);

});

var html = document.createElement('div');

var h = '<hr><table style="margin: 1em;">';

var i;

for(i=0; i<items.length; i++) {

h += '<tr>';

h += '<td style="text-align: right; padding-top: 15px;"><b>' + items[i].prop + '</b></td>';

h += '<td style="padding-top: 15px;"><input id="prop' + i + '" style="width:240px; " type="text" value="' + items[i].value + '"></inpu></td>';

h += '<td style="padding-top: 15px;"><button onclick="window.spPropertyBag.setProperty(\'' + items[i].prop + '\',\'prop' + i +'\'); return false;">Update</button></td>';

h += '<td style="padding-top: 15px;"><button style="color: red; min-width: 1em;" onclick="window.spPropertyBag.deleteProperty(\'' + items[i].prop + '\',\'prop' + i +'\'); return false;">X</button></td>';

h += '</tr>';

}

h += '</table>';

h += '<hr><h3>Add a new property:</h3>';

h += '<div style="margin: 1em; padding-bottom: 2em;">Key: <input id="newKey"></inpu>';

h += '   Value: <input id="newValue"></inpu>';

h += ' <button onclick="window.spPropertyBag.addProperty(); return false;">Add</button></div>';

h += '<div></div>';

html.innerHTML = h;

OpenPopUpPageWithDialogOptions({

title: "Property Bag Editor",

html:html,

allowMaximized: true,

showClose: true,

autoSize: true,

/*width: 800,*/

dialogReturnValueCallback: function(dialogResult) {

if(reloadRequired){

window.location.reload();

}

});

}

};

window.spPropertyBag.init();

Posted in Development | Tagged development, javascript, property bag, sharepoint | 5 Comments

16 years with Flash Renamer – A development retrospective

Posted on August 30, 2015 by Dan

Of all the applications, web services and games I have made or been part of, Flash Renamer is my darling. In case you don’t know, Flash Renamer is a Windows utility for batch renaming files and folders. It’s my own creation and reflects much of my own needs and way of working, while still trying to suit a broad user base. I started working on it a whopping 16 years ago, a respectable age for any software. Like all software published on my website, it is purely a hobby project that I developed in my spare time. I wanted to write a little bit about the story of how Flash Renamer came into being and developed through its versions, as well as some more general reflections on software development.

The current version of Flash Renamer.

The start of it all

It was early 1998 and I had discovered mp3:s. I was fascinated by this new way of storing “CD quality” music and had started to download music to build up a little collection of music that I liked (mostly euro dance :-)). I was however quite picky with the file names, and put a lot of thought into how to best name the files. They should convey as much information as possible, yet still look good and be easy to read. Bare in mind that this was before the ID3 metadata tag had become mainstream, or even supported by applications.

I quickly discovered that naming the files by hand was quite tedious though. So, I did a web search to try and find a solution. But I could only find one batch rename program (“THE Rename“). Unfortunately it did not start on my computer for some reason.

I knew a little programming, but I didn’t use any particular programming language at that time. But I had gotten Visual Basic 4 on a magazine cover disc and I liked how easy it was to make graphical Windows programs with it. I had cobbled up some simple applications with it before, and, for some reason I can’t remember, decided to make a batch rename application for myself.

The origins of Flash Renamer hints at one of the great things about knowing how to program a computer: if something does not exist that you need, you can make it yourself!

Origin of the name and interface

Finding a good name for a new product is hard, so I usually just give my new projects a name based on its purpose until I can figure out something better. In this case I simply named the new program Batch Renamer. Included in Visual Studio was a set of stock icons. For some reason I though the lightning bolt icon looked cool and used it for the program. The name Flash Renamer is simply derived from this randomly chosen icon! (This was before Macromedia/Adobe Flash become popular and pretty much hijacked Flash as a brand name. Luckily I have not had any visits from Adobe lawyers!)

Flash Renamer has a distinctive user interface layout that makes is stand out from most other batch renamers I’ve seen. I’ve always been satisfied with it, and based on user feedback it appears to be appreciated. What’s interesting is that this layout actually dates back to this very first version. Of course, it has been heavily updated and tweaked throughout the years, but the basic design clearly stems from the very beginning. Pure luck or a stroke of genius… who knows :-)

One of the earliest surviving version of Flash Renamer. The layout is a mess, but the basic ideas are there.

First public version

In March of 1999 I made Flash Renamer 1.0 available as freeware on my personal homepage.

Flash Renamer 1.0. Now all the pieces had fallen into place. It’s a little base, but you can easily see the heritage when compared to the current version.

During the next couple of months I updated the program several times to make it look and handle better, and of course ironing out bugs. It’s hard to remember, but I probably submitted it to a few software sites during this time, such as TuCows and NoNags. I remember getting 5 stars out of 6 at NoNags. (Later on, version 3 got 6 stars!).

Flash Renamer 1.3 improved the look and feel.

The first versions could rename both files and folders, including subfolders, and came with three rename functions: Find and Replace, Convert Case and Set Attributes. These pretty much represents what I needed to do with my mp3:s, namely replace underscores with spaces, set the casing to title case and remove write protection :-)

The early versions

1½ year after the first version I released Flash Renamer 2.0. I added support for reading ID3 tags in mp3 files using code I wrote myself. In retrospect it does not sound impressive, but I was fairly proud of myself at that time, especially considering the limited documentation and that Visual Basic is not exactly known for its ease of binary processing. This was a time when mp3 was rising in popularity, but before it had become a household name. Adding mp3 support was probably a very good decision from a strategic point of view, although I mostly added it because I wanted it myself :-)

Flash Renamer 2.0. You could “design” your mp3 filenames using “tags” that were replaced with ID3 metadata during renaming. The concept of tags was later expanded and used throughout Flash Renamer.

Version two also included the Add & Crop function, a command line interface and a real user manual, to name a few.

Version 3.0 came out half a year later and was quite a big upgrade, adding several new rename functions, simple shell integration. Now the program also got its logo, courtesy of Ola Zandelin.

The Flash Renamer logo

One cool feature was the file type detection, which scanned the files for magic numbers to try and figure out the correct file extension. This came about because people were uploading (usually not very legal) files to free web site hosts. In order to try and circumvent restrictions and risk of detection, they changed the file extensions from for example mp3 to a permitted file type such as gif.

Version 3.1 finally replaced the wording on the button that started the rename operation. Up until now it had said Execute, but I realized that this might not be that appropriate. I changed it to simply say Rename, which is also much more telling of the button’s action. Wording is hard. You want to convey the message in a way that is understandable to everyone without losing exactness. I think programmers tend to use too much technical terms, reducing the usability of the software. Other examples from Flash Renamer include Crop which became Remove, and Directory, which took me a lot of weighing back and forth before I finally decided to replace all occurrences of the word with Folder. And let’s not forget the function that can add a number sequence to filenames, which I first called Enum… Oh, and the Zero Padding functionality, which I first called Number Normalizing because it sounded cool, not realizing that it was actually a completely irrelevant mathematical term :-)

Flash Renamer 3.0. The tab control is getting tight with all the new functions.

Going shareware

At this time, me and some friends had started a company together, called RL Vision, and tried to market a paint application called ArtGem, inspired by the classic Amiga application Deluxe Paint (DPaint). In order to drive more traffic to our homepage I decided to move Flash Renamer from my private homepage to our company website. ArtGem eventually failed, and the company was disbanded, but I kept the RL Vision name and website as my personal software outlet.

I was fairly pleased with Flash Renamer at this point. It was a competent and stable application. It satisfied my own needs and I had gotten some praise from users. I had some ideas on how to make it better, but felt my time was limited and I was not sure I wanted to invest more in the program. At this time there had emerged a few other file rename software. At least one of them was shareware. Even though ArtGem had sold poorly, perhaps Flash Renamer would do better? I decided to give it a try and turned Flash Renamer from freeware to shareware. This was quite easy, considering that we already had the infrastructure for selling software in place after selling ArtGem.

This decision gave me the motivation to update Flash Renamer. Version 4, the first shareware version, was a big update. I replaced the rather odd file listing that used a treeview with a listview similar to Windows Explorer. This also worked as a file browser, making it fast and easy to navigate your folder structures. I also added support for viewing images as thumbnails and for reading ID3v2 metadata tags, both using third party library. Together with many other smaller features and enhancements, this version turned Flash Renamer into an application with a much more professional look and feel.

Flash Renamer 4.0 was a big update that really improved the interface. The name/logo in the top left was not the pretties though…

In version 3 I had a “simulation mode” feature that allowed you to run the rename operation without actually renaming the files. Doing so, you could inspect the log output to make sure that the new filenames were ok. With the new listview I took this to the next level, adding a preview column where you would instantly see the new filenames next to the original! This was quite tricky, since Visual Basic does not support threading. Generating filename previews take time, and would cause the UI to freeze meanwhile. I solved this by running the preview on a timer, only processing a few files at a time. Neat!

Most shareware have some limitation or annoyance to make you register. My solution was to open a window on top of the main window at startup. This window displayed a counter, counting up to the total number of files you had renamed using the program. You could not continue until the counter had finished. Thus, the more you used the program, to longer it took to start. I thought this was quite a fair way to annoy people into register, without having to limit any other functionality. (Later versions removed this counter though.)

The shareware “nag window”

I am a terrible businessman. From the very beginning, I promised free lifetime upgrades when buying Flash Renamer. Part of this was of course as an incentive to buy the product. But just as much was the simple fact that this is how I would like other software to work as well. I understand that “lifetime” is difficult for most businesses. But some software vendors seem to have made it into a business model in itself to constantly get people to pay for upgrades, and I really hate that.

Buying Flash Renamer also gives you free technical support by email. But the truth is that I help anyone who emails me just as much, no matter if they are registered or not :-). But this is probably a good strategy, because often people ask questions on how to use a program for their situation, before they actually buy a product.

After the failure with ArtGem, I did not expect Flash Renamer to sell much. But to my surprise, without any marketing, it started to sell a copy every now and then. The earnings are not anywhere near enough to make a living out of, but it is very satisfying knowing that you made a product on your own that people are prepared to pay for.

Useful functionality or bloatware?

I continued working on Flash Renamer, adding new functionality and tweaking the program to perfection. Some, like reading Exif tags, were a result of user requests and/or market study. But most new development stem from my own experience of using the program. I am a firm believer that dogfooding is the way to success.

One new function was batch replace. Find and replace had been a function since the first version, but realized that you often have a set of terms that you always want to replace to clean up your filenames. So the batch replace function is basically a list of find/replace terms. Inception?

Flash Renamer 5.0. This screenshot also shows the “Visual Assist” utility, that helps the user to pick places and select texts. This is one of my favorite enhancements, as it is a good example of how you can make an application easier to use.

In version 5 I added a shell extension, hooking into Window Explorer to allow the user to right click on files and send them directly to be renamed by preset in Flash Renamer. It was a very convenient integration IMO. But the development was oh so problem ridden. Let me just say that I don’t recommend anyone to build a shell extension menu unless you really know your way around the Windows API. And I especially don’t recommend anyone doing it in VB6 :-) It was so much trouble to build, debug and maintain. Then 64-bit Windows got its breakthrough, and 32-bit shell extensions because useless. At that point I decided to stop supporting it.

The Flash Renamer shell extension menu in Windows Explorer

Version 6 included ID3 tag writing functionality for mp3:s. This brings up the interesting topic of what you want your application to be? At its core, Flash Renamer modifies filenames. How far from this core can (or should) you stray without losing your identity and risk becoming bloatware? Flash Renamer has the ability to change file’s dates and attributes too. I would argue that this is fairly close to the core, as the filename, date and attributes are all properties of a file. But writing ID3 tags? That’s pretty far from the core. But you could argue that you are modifying the content inside the ID3 tags to suit your needs, which is pretty close to the idea of modifying filenames to suit your needs. But that’s a slippery slope, as using this argument we can easily motivate lots of other operations. For example, why not let Flash Renamer open and modify the content of text files too then? In fact, I had this idea, but decided to fork Flash Renamer into another product called Replace Genius. That was probably a wise choice. Back to the ID3 writer. The biggest motivation for this was the fact that much of user base (and I :-)) use Flash Renamer to manage mp3:s, and ID3 is an essential part of this. Thus I believe that writing ID3 tags is an added value to Flash Renamer.

Flash Renamer 6.0. Instead of adding a third row to the tab control, I sorted the functions into categories (the round buttons) that changed the tabs.

Scripting is another interesting feature. It allows anyone to make their own custom rename functionality to suite to their specific needs, through a simple VBScript interface. There is something really attractive about opening up your software to users and other developers. But is it worth the work? When choosing what functionality to implement in a piece of software you always have to weigh it against how useful it will be for the end users. If only a few people can be expected to find it useful, then it is hard to motivate implementing it. Scripting in a sense is a way to enable the program to implement such odd functionality without cluttering the interface too much with features that no one uses. But you can also argue that scripting in itself is such an odd functionality. Even though I believe that the user base of Flash Renamer in general is quite computer savvy, I don’t think that that many have the skills or motivation to actually construct their own scripts. Probably only a few people have ever used the scripting functionality. But I still like it for some reason :-) And it has also allowed me to implement some odd functionality that I thought was neat, but not neat enough to motivate a new function.

The future of Flash Renamer

At this point I am pretty much done with Flash Renamer. There are many things I can think of that would be cool to add to the program. But all essential features are there. Sometimes you have to say stop. Letting go of Flash Renamer means more time to other projects (and life).

Continuing developing a VB6 application today does not feel meaningful. It is tempting to re-write Flash Renamer in another language. Like all programmers I think that I could make it so much better in all kinds of ways. But the motivation is not there. Why re-do something that works and fulfills all my personal needs? Perhaps if there had been a “real” market for such an application, but there isn’t.

I will however continue to support the program for as long as it sells, and then some more. I hate software vendors who drop products and bail out of responsibility. I am working on open sourcing all my freeware products, and when the time comes I will also make sure that Flash Renamer is open sourced.

User feedback

One of the most grateful things with making software is the user feedback you get. Of course, much of this feedback is bug reports and feature requests, but I also get letter from people thanking me for my work. I’m always happy to hear from my users, and I make sure to answer all letters, even if only with a simple “thank you”. I remember one of the earliest mails I got when the first versions of Flash Renamer had just been released. This guy from Japan wrote to me to report a bug. Imagine that. Half way across the world someone completely unknown to me had found my personal website, downloaded my program and was using it. That felt pretty cool at the time, for many reasons.

Most new functionality in the later version of Flash Renamer has been a combination of user feedback and my own ideas and needs. Flash Renamer gets a lot of feature requests from user, which I guess is expected since all users have their own specific needs. While I appreciate the feedback, I can rarely implement such requests. I have to distill the feature into a more general functionality that can appeal a broader user base. It saddens me to usually write back thanking users for their suggestions, but having to tell them that I most likely will not be able to implement it.

Visual Basic is dead, long live Visual Basic

When I started programming Flash Renamer, Microsoft Visual Basic 6 was the coolest thing in town, at least if you could stand being ridiculed by “real” programmers who used C/C++. Not so anymore. Microsoft decided that .Net was the future, and simply stopped development of classic Visual Basic in order to get people to switch. Sure, there was VB.Net, but that was a completely new thing, basically only sharing some language syntax with its predecessor. Upgrading was not a simple task, if even impossible, and most people seemed to do like me and ignore the “VB7”.

Working with an obsolete technology has been difficult at times. The most obvious problem was the new “XP themes” introduces in Windows XP. Getting your program to fully use these was problematic, and required many tricks and hacks. I must however hand it to Microsoft that they are good at backwards compatibility. Even though Flash Renamer is built with ancient technology, it still works, even in Windows 10! Old software tends to “just work” in Windows. This is so much better IMO than companies like Apple and Google, who seems to have no problems throwing out “old” technology. Developers need to constantly keep up with changes or go out of business. It’s no wonder that Microsoft is the choice of large corporations, and not Apple.

Choosing a programming language

VB6 was my main programming language for a long time. But eventually I had to face the fact that I needed to find something else. It took me a long time before doing so though. Given how bad VB6 developers had been treated, I did not want to end up like that again. I wanted a high level language with a readable and productive syntax, sustainable in the long term with a large community, preferably cross platform, producing native applications and with a good IDE for easy GUI development. I finally settled on C#. It did not fulfill all my wishes, but it was the best I could find. I’m not sure I would have chosen differently today, but there sure are many more choices out there today, especially with all the new web based technology. In the end it is nearly impossible to choose the “best” language for the future. In the world of development, change is rapid. Even if you have a favorite programming language, developers more and more need to be open to new technologies in order to survive on the market.

The world of open source, available libraries and development communities has exploded compared to when I began working on Flash Renamer. Today you often put together new software or services by piecing together various components. You don’t have to write as much code yourself anymore. And if you do, the amount of documentation and help available online is astounding. If I had to redo Flash Renamer today, that would probably be the biggest change. Less code, more puzzling to make things work together.

On being a software developer

I hardly earn any money to speak of from my software. In the end, the number of hours spent on developing Flash Renamer far exceeds what I’ve earned. It’s very hard to earn a living on shareware unless you have a major hit. For me, development is a passion. I don’t do it to earn money, but because I really enjoy coding and sharing my work. So much that I spend my free time after work doing it. I think this is a quite common theme amongst developers. Just think of all the open source and freeware products available today and how much this has contributed to the computer landscape ever since it begun.

I am a reasonably good programmer today. I am not one of those with an innate talent for programming though; my talent is more based on experience. Developing applications at home has definitely helped me with that experience, and thus helped my professional career. On that note, when seeking a job, having something of your own to show is worth a lot!

Developing a product on your own requires more than just programming (although it usually starts out with just programming). You need to design graphical user interfaces and consider usability issues, think about software architecture, create web sites, writing copy and manuals, handle business tasks, give user support and so on. Such a wide range of tasks is something you would never get to do in a larger organization. It is much work, but can also be rewarding and develop you as a person.

The downside of being a one (wo)man team is of course that you can’t be an expert on everything, and there is no one there to give immediate feedback or help when you need it. You have to make all the design choices yourself, and that is very hard. Designing and tweaking the user interface, deciding on how to implement a feature, making architectural choices, taking into account all possible user needs and circumstances. These kinds of decisions are what tends to take the most time for me when developing something. Programming is actually pretty fast and easy if you know what exactly what you need to do.

Closing thought

Sometimes I wonder how many files “my little utility” has renamed. I’m sure it’s tens of millions, perhaps even billions? But more importantly, how many hours of manual labor has it saved people all over the world!? Thinking of it like that makes it clear even if it is just a fairly unknown program with a small user base, the amount of saved work is not *that* insignificant. It feels good knowing I made the world at least a little bit better :-)

My current copy of Flash Renamer has performed roughly 80,000 renames since I installed it about 3 years ago.

Posted in Articles | Tagged apple, development, flash renamer, freeware, history, hobby, id3, microsoft, mp3, programming, programming languages, rl vision, shareware, shell extensions, vb6, visual basic, windows | 1 Comment

Using wildcard matching in any programming language

Posted on July 28, 2015 by Dan

Most computer savvy persons are familiar with using wildcards when listing files and similar operations. Wildcards are quite easy to understand and use. An asterisk * means match anything, and the lesser known question mark ? matches a single character. So when creating our own applications we often want to give our users the ability to search with wildcards. The problem is that most programming languages don’t have a wildcard string matching functionality. But it is actually quite easy to implement on your own. All you need is to use Regular Expressions in a clever way.

Wildcards can be seen as a subset of RegEx; anything you can do with wildcard can also be done with RegEx. In RegEx the period (.) symbolizes any character. We can add an asterisk (star) after the period (.*). The * quantifier tells RegEx to search for zero or more of the preceding value, in this case any character. That sounds a lot like the asterisk in wildcards, doesn’t it? Similarly, the ? modifier means zero or one of the previous value.

So what we need to do is to convert our wildcard search into a RegEx search. This outlines the process:

First we need to escape the search string to convert any special character in RegEx into character literals.
Next, locate the wildcards and convert them into proper RegEx patterns.
You probably also want to set the RegEx match to be case insensitive.

This can be used in all programming languages that support Regular Expressions. Exact syntax and RegEx dialect may vary though. Here are two examples that I made, one for C# and one for JavaScript:

public static bool WildcardMatch(string find, string source)
{
    find = Regex.Escape( find );
    find = find.Replace( "\\*", ".*" );
    find = find.Replace( "\\?", "." );
    Regex regex = new Regex( find, RegexOptions.IgnoreCase );
    return regex.IsMatch( source );
}

public static bool WildcardMatch(string find, string source)

{

find = Regex.Escape( find );

find = find.Replace( "\\*", ".*" );

find = find.Replace( "\\?", "." );

Regex regex = new Regex( find, RegexOptions.IgnoreCase );

return regex.IsMatch( source );

}

JavaScript

function wildcardMatch(find, source) {
    find = find.replace(/[\-\[\]\/\{\}\(\)\+\.\\\^\$\|]/g, "\\$&");
    find = find.replace(/\*/g, ".*");
    find = find.replace(/\?/g, ".");
    var regEx = new RegExp(find, "i");
    return regEx.test(source);
}

function wildcardMatch(find, source) {

find = find.replace(/[\-\[\]\/\{\}\+\.\\\^\$\|]/g, "\\$&");

find = find.replace(/\*/g, ".*");

find = find.replace(/\?/g, ".");

var regEx = new RegExp(find, "i");

return regEx.test(source);

}

When implementing this in your own code, you need to think through how you want your search functionality to work. Perhaps you want case sensitive search? How should the beginning and end of strings be handled? Is the “greedy” property of RegEx desirable? Perhaps you need to add some more RegEx to control such behavior.

Resources:

Posted in Development | Tagged c#, coding, javascript, programming, regex, regular expressions, tutorial, wildcards | 1 Comment

Fixing the ‘PRM_ParserErrorDetails’ problem for SharePoint Apps

Posted on July 23, 2015 by Dan

Today I finally solved a problem that I have been trying to hunt down for a long time. I haven’t been able to find any good help on this elsewhere, so let me share how I solved it.

This is my setup: I have SharePoint Online site, where I open a modal window to load a page from a provider hosted app (Add-In). The app is running in Azure Websites (Web Apps). The page is built with ASP.Net WebForms and displays a simple form that you submit back to the app.

The problem was that when you clicked the submit button in Internet Explorer, a JavaScript in MicrosoftAjaxWebForms.debug.js crashed, preventing the postback:

SCRIPT5007: Unable to get property 'PRM_ParserErrorDetails' of undefined or null reference
File: MicrosoftAjaxWebForms.debug.js, Line: 1432, Column: 13

1 2	SCRIPT5007: Unable to get property 'PRM_ParserErrorDetails' of undefined or null reference File: MicrosoftAjaxWebForms.debug.js, Line: 1432, Column: 13

Other browsers worked fine though. The solution was stupid simple, but easy to miss:

The Azure site need to be added as a trusted site in Internet Explorer!

For the curious: The postback never seemed to make it back to the server. Actually it did, but it got stuck in the Page_PreInit() mehod, where SharePointContextProvider.CheckRedirectionStatus() returned a “RedirectionStatus.CanNotRedirect” and the the connection ends.

Posted in Development | Tagged apps, asp.net, bug, javascript, sharepoint, sharepoint online, webforms | 6 Comments

Moving web parts in SharePoint (without going insane)

Posted on June 14, 2015 by Dan

If you’ve ever edited a SharePoint 2013 page with web parts and tried to drag them around, you’ve probably experienced frustration over how bad it works. I don’t know of a quick fix for this, but here are a few tips that might help you a little bit:

First of all make sure that you are using Internet Explorer 9 or 10. IE9 works best. Other browsers, including IE11(!), will not work in a satisfactory way.

Tip: In Internet Explorer, press F12 to open the developer tools. In the top right corner of this toolbar you should see a drop down menu for selecting “document mode”. Use this to revert back to previous version of Internet Explorer even if you have the latest version. (Note that “Edge” in this context refers to the latest rendering engine (typically IE11) and not the new web browser from Microsoft with the same name.)

Here’s my best trick to handle web parts that just don’t want to move: Suppose that you want to add space between two web parts (or above the topmost web part). It’s seems impossible to place the cursor in between the web parts. But you can place the cursor at the very bottom of the web part zone, below the last web part. Do this and hit enter a few times to make extra room at the bottom. Now grab on to the web part and drag it downwards until you see the cursor appear in the new space that you just created. Release the mouse and the web part will move down a few steps!

Other things that are good to know:

The ability to move web parts depends on the type of page and/or area it is located in. Web Part Zones usually work fine. You can even drag web parts between different zones. It is Wiki pages and rich text fields that cause trouble.
Try to drag a web part and simply drop it on top of the web part above. Usually this will reorder them.
If you mess up, Ctrl+Z usually works to undo the last steps.
Web parts can be minimized so only the title shows. This can be useful when working with web parts taller than the screen height.
For web parts located in a Web Part Zone, open the web part properties (the gray sidebar) and find the section named “layouts”. Here you can manually both set the zone and internal ordering of the web part.
When everything else fails, remove the web part and add it again. New web parts are consistently added to either the top or bottom of the web part zone. Use this fact to plan the order of the web parts.

Posted in Tips | Tagged internet explorer, sharepoint, web parts | 26 Comments

In a Hurry?

Background

Load and initialize drawings with Snap.svg

Verify the file format

Reading Visio metadata

Removing SVG tooltips

Seting up event handlers on Visio shapes

Drawing a box around clicked shapes

Highlighting hovered shapes

Parsing Visio shapes

Resizing the SVG <object> container

Zooming in on the drawing

The complete code

The start of it all

Origin of the name and interface

First public version

The early versions

Going shareware

Useful functionality or bloatware?

The future of Flash Renamer

User feedback

Visual Basic is dead, long live Visual Basic

Choosing a programming language

On being a software developer

Closing thought

About RLV Blog

Recent Posts

Categories

Tags

Popular Posts

Archives

Meta