Tuesday, April 7, 2015

Soti MobiControl Dynamic Template

Well, I just created my first ever Github project.  It's a template for use with Soti's MobiControl.  If you have ever used MobiControl then you know that the Lock Screen design/templates are VERY limited.  You basically have to hand write HTML and use their tags (ex. ) in the HTML to insert each and every entry in the Lockdown policy.  This is very cumbersome for anyone, let alone those who are not really good with HTML.  

Once you have finally created a good working template you better hope that you never need to add or delete an item from the lockdown policy.  If you do your going to have to go into the the HTML and manually add/remove the references to the correct lockdown tag. You better hope that it doesn't screw up your layout.  Or worse you decide to use a different device with a different screen size!  You may as well start over....

With that in mind I created a template that uses CSS and JavaScript to automatically adjust for the screen size, number of lockdown entries, and the header and footer text/image.  It also automatically uses the exe icon if you don't manually set an image for your entry (yeah you had to specify that in the HTML manually).  This new template will make it really easy to add and delete entries in the lockdown policy without ever having to touch the HTML.  Oh and did I mention it handles device rotation!?  Yep... That too.

If your using MobiControl and want to check it out, or are just interested in device orientation through CSS, or any of the other tweaks I used.  Check it out at https://github.com/mobilebob/Soti_Dynamic_Template

Description:
A Soti MobiControl template, that's dynamic. A mobile phone style template that changes automatically depending on how many entries you have in your lock screen. It keeps you from having to change the HTML every time you want to change the lock screen entries. It's also dynamic for screen size and changes based on device orientation. Uses CSS and Javascript

15 comments:

Unknown said...

Oh you beauty I have been looking for something like this for years!! Thank you from the bottom of my heart.

Unknown said...

I am getting an error on the device that I am deploying this soti template to - Object doesn't support this property or method 'insertRule'

Travis Epperson said...

@Aaron Brockhaus
Unfortunately the device your using doesn't support full Javascript. Right now the template doesn't support WinMobile devices or other older browsers. Sorry about that, I would love to build in a check and do something simpler (maybe without rotation) if it detects an old browser, but haven't had time.

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

Unknown said...

Thanks for this, it gave me a good starting point for my master template. We are using the same principal with the Soti Links being built dynamically - it is SO annoying that they can't be built within a for loop!

We also have multiple lockscreen pages which can be swiped through and the javascript creates the pages on the fly and decides on the grid setup depending on screen size.

borgib said...
This comment has been removed by the author.
Unknown said...

great job!! it works like a charm! but I have a doubt...I want to set a custom background image, how can I do it?
Thank you

Travis Epperson said...

You will need to edit the CSS.

Check out this for reference,
https://www.w3schools.com/css/css_background.asp

Unknown said...

yes, I did it. I modified this entry.Previosly I create a rule sync to move a "myfile.png" to %sdcard&

html, body {
background-image: url(%sdcard%MYFILE.png);
height:100%; /* needed for container min-height */
margin: 0px 0px 0px 0px;
}

Thank you!

Unknown said...

This is absolutely wonderful, but is the header not dynamically updated as well? I am using %devicename% for ease of identification and when I shortened the name to fit it did not update on the lock screen but did update in the MOBI app.

I even rebooted the scanner as well.

Travis Epperson said...

@Unkown
It is dynamic, the variable should read every time the locks screen is updated. I'm guessing the device name hadn't updated on the device. Try a force check-in and check the mobicontrol app on the device to see what it lists as the device name.

Unknown said...

The name did update and verified it on the Mobicontrol app, I should have clarified that I did check in the device, (didn't work) but restarting it did.

It's honestly not a huge deal, but interesting why this does not but the default lockdown updates dynamically without a reboot. If it becomes a problem I might just contact Soti support.

Thanks for your response, this lockdown is great. Here's hoping that Soti improves their default lockdown in the future. 😀

Unknown said...

Hey Travis,

This works really well, but do you have any idea how to make a vertical orientation to show more than 3 icons at a time? I'm trying to make it at least 4 icons horizontally with different sections for different apps.

Travis Epperson said...

To add a 4th Column of icons you would just need to shrink the size of the rows. Everything else would be automatic. Look at the line that starts with "if (IconCount < 7){" Below that sets the row sizes. Under the "} else {" line sets size when there are more then 6 icons. Shrink those numbers and it will effect how many icons can fit.

Unknown said...

Thanks for the fast response, I did figure this out about 30 minutes after my post, but I appreciate the response regardless.

This is actually pretty much my first foray into HTML and CSS, so far through trial and error, I've been able to manipulate it how I need it for our lockdown. It has been a good learning experience. I just wish that SOTI had a proper tool for developing these with an ability to preview changes live on the device. I am resorting to pushing out a profile each time I make changes that are slow. I have heard from our account manager they are possibly planning to use their SOTI Snap tool to do this in the future.

Here is the current lock screen we have so far, take a look if you are interested.

https://imgur.com/a/C0D2Yo2

Travis Epperson said...

Nice! Looks really good. I was driven to create this template because Soti had nothing and I couldn't stand having to change the HTML everytime we wanted to add an Icon. Glad it's working for you!