Post-Webinar Post: Sitefinity's Mobile App Builder

Post-Webinar Post: Sitefinity's Mobile App Builder

Posted on June 04, 2013 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

This post comes to complete my webinar from May 30th, "Sitefinity's Mobile App Builder". To learn more about the Sitefinity Mobile App Builder visit this page

Sketch_of_Google_Chrome_icon_(2008) Shared Links

Here are the relevant links which were shared in the webinar:

The Recorded Webinar & PowerPoint File

The PowerPoint presentation can be downloaded at this link. The webinar is currently available on demand for free view at the following link:
http://www.sitefinity.com/developer-network/webinars/webinars-on-demand/sitefinity-6.0-s-mobile-app-builder

User-Creation Automation Scripts

No-one dared to ask how I created a user through the backend so fast.
Here's the small bookmarklet I've been using in 3 different variants.
Bookmarklets work on all web browsers, except Internet Explorer, which means they work on all web browsers.

How to use bookmarklets?

  1. In Firefox/Chrome: Bookmark a page. Any page. It would be good to bookmark it somewhere in your bookmarks toolbar (or a folder on the toolbar) for quick access.
  2. In the context menu, right-click the newly added bookmark and select "Properties" (in Chrome: the "Edit..." option).
  3. Enter some descriptive text in the "Name" field. E.g. "Create a test user".
  4. Copy the bookmarklet script given here and paste it into the "Location" field (in Chrome: the "URL" field).
  5. Whenever needed, click the bookmarklet. It should guide you from there.

Script #1: Create the test-user

This one will create a user with a predefined name and password, and assign it to whichever roles you select.

In Sitefinity, go to Administration -> Users and click "Create a user", check whichever role checkboxes you want the user to have (e.g. "Administrators"), then run the bookmarklet.

There a few marked values which you can change as you like: the first name, last name, user name, email address and password.

javascript: (function() { function getRealId(partialid,tagname, doc){ var re= new RegExp(partialid,'g'); if (tagname==''||tagname==null) tagname = '*'; var el = doc.getElementsByTagName(tagname); for(var i=0;i<el.length;i++){ if(el[i].id.match(re)){ /*alert(el[i].id);*/ return (el[i].id); } } return null; } var frames=document.getElementsByName("newUserDialog");  if((frames!= null) && (frames.length>0)){var framedoc = frames[0].contentDocument;   var firstName = getRealId("firstNameFieldControl", "input", framedoc); if(firstName!=null) framedoc.getElementById(firstName).value="TestUser1"; var lastName = getRealId("lastNameFieldControl", "input", framedoc); if(lastName!=null) framedoc.getElementById(lastName).value="Sitefinity"; var email = framedoc.getElementById("Email0"); if(email!=null) email.value="sitefinity@sitefinity-campaigns.com"; var userNameBox = framedoc.getElementById("UserName0"); if(userNameBox!=null) userNameBox.value="testUser"; var passBox = framedoc.getElementById("Password0"); if(passBox!=null) passBox.value="testUser@2"; var passBox2 = framedoc.getElementById("ConfirmPassword0"); if(passBox2!=null) passBox2.value="testUser@2"; var provider = framedoc.getElementById("membershipProviderList"); if(provider!=null) provider.value="BackendUsers"var createButton = framedoc.getElementById("createNewUserButtonPanel"); if(createButton!=null) { var buttonAs = createButton.getElementsByTagName("a"); if ((buttonAs!=null) && buttonAs.length > 0) var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); buttonAs[0].dispatchEvent(e); } }else{alert("Dialog \"newUserDialog\" not found!\n\n1.Go to Settings -> Users.\n2.Click the [Create a user] button.\n3.Then use this link.");}} ) ();

 Script #2: Create an author

This one will create a user with a predefined name and password, and assign it to whichever roles you select, and it will make sure the "Authors" role is checked for this user.

In Sitefinity, go to Administration -> Users and click "Create a user". The created user will be assigned the "Authors" role automatically. You may check whichever other role checkboxes you want the user to have (e.g. "Administrators"), then run the bookmarklet.
Again, you may adapt this script for creation of a different first name, last name, user name, email address and password, and you can also change which role-box is checked automatically.

javascript: function checkRole(roleString) { var labels = document.getElementsByName('newUserDialog')[0].contentDocument.getElementsByTagName("label"); for (var i=0; i < labels.length; i++) { if (labels[i].textContent ==roleString) { var parent = labels[i].parentNode; for(var child=0; child < parent.childNodes.length; child++) { if (parent.childNodes[child].nodeName.toUpperCase()=="INPUT" && typeof(parent.childNodes[child].getAttribute)!="undefined" && parent.childNodes[child].getAttribute("type").toUpperCase()=="CHECKBOX")  { parent.childNodes[child].checked = true; } } } } } function getRealId(partialid,tagname, doc){ var re= new RegExp(partialid,'g'); if (tagname==''||tagname==null) tagname = '*'; var el = doc.getElementsByTagName(tagname); for(var i=0;i<el.length;i++){ if(el[i].id.match(re)){ /*alert(el[i].id);*/ return (el[i].id); } } return null; } (function() { var frames=document.getElementsByName("newUserDialog");  if((frames!= null) && (frames.length>0)){var framedoc = frames[0].contentDocument; var firstName = getRealId("firstNameFieldControl", "input", framedoc); if(firstName!=null) framedoc.getElementById(firstName).value="Author"; var lastName = getRealId("lastNameFieldControl", "input", framedoc); if(lastName!=null) framedoc.getElementById(lastName).value="Sitefinity"; var email = framedoc.getElementById("Email0"); if(email!=null) email.value="author@sitefinity-campaigns.com"var userNameBox = framedoc.getElementById("UserName0"); if(userNameBox!=null) userNameBox.value="author"; var passBox = framedoc.getElementById("Password0"); if(passBox!=null) passBox.value="author@2"; var passBox2 = framedoc.getElementById("ConfirmPassword0"); if(passBox2!=null) passBox2.value="author@2"; var provider = framedoc.getElementById("membershipProviderList"); if(provider!=null) provider.value="BackendUsers"; var createButton = framedoc.getElementById("createNewUserButtonPanel"); checkRole("Authors"); checkRole("Authors (Application Roles)"); if(createButton!=null) { var buttonAs = createButton.getElementsByTagName("a"); if ((buttonAs!=null) && buttonAs.length > 0) var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); buttonAs[0].dispatchEvent(e); } }else{alert("Dialog \"newUserDialog\" not found!\n\n1.Go to Settings -> Users.\n2.Click the [Create a user] button.\n3.Then use this link.");} } ) ();

Script #3: Prompt me!

This script has no predefined values stored in it. It will prompt you, once you click it, to provide the data for the newly created user.

Here too: check whichever role checkboxes you want the user to have (e.g. "Administrators"), then run the bookmarklet.

javascript: (function() { var userNameToCreate = prompt("Create a user named...", ""); if((userNameToCreate==null) || (userNameToCreate=="")) { alert("Action cancelled");} else { var selectedPassword=""; var passwordMessage=""; while((selectedPassword=="") || (selectedPassword==null)) { selectedPassword = prompt(passwordMessage + "Please set a password for " + userNameToCreate + ":", ""); passwordMessage="Password cannot be empty!\n"; } var frames=document.getElementsByName("newUserDialog");  if((frames!= null) && (frames.length>0)){var framedoc = frames[0].contentDocument;   var firstName = framedoc.getElementById("userNewDialog_ctl00_ctl00_profilesData_section_0_ctl00_ctl00_fields_firstNameFieldControl_0_ctl00_0_ctl00_0_textBox_write_0"); if(firstName!=null) firstName.value=userNameToCreate; var lastName = framedoc.getElementById("userNewDialog_ctl00_ctl00_profilesData_section_0_ctl00_ctl00_fields_lastNameFieldControl_1_ctl00_1_ctl00_1_textBox_write_1"); if(lastName!=null) lastName.value=userNameToCreate; var email = framedoc.getElementById("Email0"); if(email!=null) email.value=userNameToCreate + "@sitefinity-campaigns.com"; var userNameBox = framedoc.getElementById("UserName0"); if(userNameBox!=null) userNameBox.value=userNameToCreate; var passBox = framedoc.getElementById("Password0"); if(passBox!=null) passBox.value=selectedPassword; var passBox2 = framedoc.getElementById("ConfirmPassword0"); if(passBox2!=null) passBox2.value=selectedPassword; var provider = framedoc.getElementById("membershipProviderList"); if(provider!=null) provider.value="BackendUsers"; var createButton = framedoc.getElementById("createNewUserButtonPanel"); if(createButton!=null) { var buttonAs = createButton.getElementsByTagName("a"); if ((buttonAs!=null) && buttonAs.length > 0) var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); buttonAs[0].dispatchEvent(e); } }else{alert("Dialog \"newUserDialog\" not found!\n\n1.Go to Settings -> Users.\n2.Click the [Create a user] button.\n3.Then use this link.");} } } ) ();

Minor Glitches

Most of the scenarios presented in the webinar worked as planned. However I did experience minor glitches in the flow of demonstration. Such misfortune is not uncommon, but for those who may wonder what caused the glitches, I'm adding this section to explain better.

  • Trying to open the items stored for the first data type "Conference" defined for the dynamic module "Conferences", on the Sitefinity Box, running on the Android SDK emulator, popped up an error: "undefined' from undefined:undefined".


    Why did this happen?
    This is due to a currently known issue with Kendo templates binding, an issue caused by naming the date-time field "Date", which was my mistake during the presentation..

    How to avoid?
    If you add a date-time field, avoid strictly naming it "Date".
  • Trying to log into my Sitefinity application from the ICENIUM simulator, didn't result in an actual login as expected, but rather stayed on the login screen.

    Also, trying to reopen the Sitefinity Box on the Android emulator, which had been successfully opened in the beginning, resulted in an error message "The connection to the server was unsuccessful".

    Why did this happen?
    This issue was later examined but did not reproduce, so it was due to a temporary connectivity problem during the webinar.

    Hint:
    The file "config.js", which resides in the "scripts" folder of Sitefinity's produced mobile app, contains a websiteUrl variable, which stores the URL of the Sitefinity instance to which the app connects.

Q&A

To follow-up the questions which were asked during the webinar, I've arranged them as Q&A's.

Q: Is this Mobile App Builder included in the latest CMS version or is it an add-on?
A: The Mobile App builder is available and supported as an integral part of the CMS from version 6.0 and on, as part of the mobile add-on.

Q: Sitefinity Box is available for iOS both iPad and iPhone, Android for the phone but not the tablet. Any idea when that will be added given the larger market share of Android over iOS?
A: Support for the Android tables will be added on the next release of Sitefinity Box, which is coming soon.

Q: Sitefinity Box access counts as a concurrent SF admin user, thus Small Business Licenses need to log out from admin before using it?
A: If you try to log in into Sitefinity Box with a concurrent user, you will be logged in and the user will be force-logged-out from Sitefinity. You can, however, log in with a front-end user and just view the data.

Q: On the home page of the Telerik Sitefinity website there is a graphic of News, Events, Forums on Sitefinity Box. Are all these modules re-written versions of the pre-built ones? Would we have to replace events, news with dynamic new versions in order for them to appear in Sitefinity Box?
A: The graphic on the site is just an example of how content can be displayed in Sitefinity Box. Currently there is no support for static modules, though.

Q: What 's the difference between Sitefinity Box and ICENIUM? Are they two emulators or what ?
A: Sitefinity Box is a mobile application for Android and iOS phones, which was built with Icenium platform. Sitefinity Box allows users to consume mobile applications created with Sitefinity 6.0 or greater.

Q: ICENIUM is available for which Sitefinity version? Professional, Standard...?
A: To be able to create mobile apps from Sitefinity content the mobile add-on is needed, which is part from the Professional and Enterprise editions but can be purchased as an add-on for other license types. To run the app in ICENIUM, an account is needed, so refer to the ICENIUM website. It has one month trial period which is great for evaluation purposes.

Q: Does ICENIUM allow you to make content offline?
A: To authenticate in ICENIUM and have access to your apps, an internet connection is needed. Once you have authenticated and the app is open all of the changes are saved in the cloud. However if you get disconnected for any reason changes are saved to local storage. Developing apps entirelly in offline environment is not supported.

Q: Can I have the same environment like ICENIUM with Visual Studio 2012?
A: Sitefinity and ICENIUM allow you to download all the files which comprise your standard HTML5 mobile application project as an archived zip file. You can then work with them on any development environment, though not all would give the power and comfort ICENIUM does.

Q: If you start publishing from Sitefinity, make some source changes in ICENIUM and afterwards republish from Sitefinity, what happens with the changes. Is Sitefinity aware of those changes?
A: Publishing an application from Sitefinity overrides the files in ICENIUM with the ones from Sitefinity. However if you add additional files in ICENIUM and then republish the application your files will not be modified.

Q: You're missing the > on a <ul> in moduleApp.html. Could that be why the app isn't working?
A: Good catch! However, a closer look reveals the > is actually there.
So that probably wasn't it... :-/


Q: Evaluation date should be longer than 30 days.
A: This is a marketing decision.

Q: Great demonstration despite the glitches.
A: Thank you very much!

Q: How soon with this webinar be available?
A: It's available now.

Q: Has the webinar already started?
A: Yes.

Alon Rotem

Alon Rotem is a team leader of the SDK & Documentation team of Sitefinity. He is also an active lector of developer courses at the Telerik Academy institute. He joined Telerik in 2009 as a senior .NET developer and has been a team leader since 2013.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation