Azure App Services and SharePoint 2016

Yesterday Microsoft announced the availability of Azure App Services, a new high-level grouping of services for building apps on Azure cloud platform. According to the announcement blog post:

App Service is a new, one-of-a kind cloud service that enables developers to build web and mobile apps for any platform and any device. App Service is an integrated solution that streamlines development while enabling easy integration with on-premises and SaaS systems while providing the ability to quickly automate business processes.

I immediately saw “On-Prem SharePoint Server” in the list of the available connectors for Logic Apps and API Apps.

image

Also, SharePoint is visible in the API Apps catalog in Azure, too.

API Apps Marketplace

It has made me think that a SharePoint 2016 could, in theory, use the new Azure App infrastructure to run workflows (now called Logic Apps, similar to BizTalk orchestrations) that span multiple services: SharePoint, Exchange, public and private social networks, data stores and so on. The logic of the workflow would be based in Azure and it would consume the other services through the connectors. The authentication clould be brokered by the Azure AD.

I like the idea. Only the Ignite will let us know how much of the idea holds true.

Evento de SUG.CAT sobre formularios en SharePoint

Este sábado 21 de marzo de 2015 hicimos el primer evento trimestral del año desde nuestro grupo de usuarios de SharePoint de Catalunya SUG.CAT. Nos reunimos en Casa Golferichs, un centro cívico de Barcelona donde ya habíamos hecho otros eventos.

sugcatEl tema era “Quiero hacer formularios con SharePoint, ¿qué hago?” y cubrimos varios temas de interés como el futuro de InfoPath, las opciones de personalización de los formularios con JavaScript y código NET y productos de terceros como KWizCom Forms.

En este evento contábamos con los patrocionadores KWizCom, Altran y Tokiota, que hicieron posible que más de 40 personas estuviesen compartiendo conocimiento en un lluvioso sábado.

Pondré los enlaces a las presentaciones en cuanto estén colgadas por los ponentes. Mientras tanto pongo aquí unas fotos del evento, hechas entre Carlos Sosa y un servidor.

 

 

 

Detect Popup Window Closing in Lightswitch

My last adventure with Lightswitch was trying to detect when a popup window inside a screen is closed.

You can close a Lightswitch popup window by clicking or tapping outside the popup. The jQuery Mobile popup widget that Lightswitch uses then closes the popup. However, I wanted to intercept that event and do some housekeeping such as discarding the changes made by the popup.

jquery mobile popup

The difficult thing was finding out where to put the event hookup code. Then, it was just a question of using jQuery Mobile Widget afterclose event that is triggered when a popup is closed.

The right event to listen for in my case was the rendering of the popup content. In the Lightswitch designer add a postRender event handler and associate the afterclose event of the parent object (the popup itself):

SharePoint App Catalog And Missing Apps

Another weird SharePoint app bug happened yesterday. The solution was fairly easy once you know what’s going on, but it’s just weird altogether.

SYMPTOMS

You have a custom app in your SharePoint 2013 App Catalog.

A custom app inside app catalog under Apps for SharePoint
A Custom App Inside App Catalog

You want to add this app to a SharePoint site.  You can’t find your app in the “From Your Organization” section when you click at “Add an app” in a site.

The App Is Missing From "Your Apps"
The App Is Missing From “Your Apps”

CAUSE

I first suspected that the current user doesn’t have permissions to add an app. However, the user is the site collection administration and thus has the permission to install an app.

Yet…a slight detail. The App Catalog site is, well, a SharePoint site. With its own permissions. And, by default, containing only the user who created the catalog in the first place (the system admin).

So, the current user, although a site collection admin, doesn’t have permissions to read from the app catalog. (This is the weird part, as I expected SharePoint to do the reading using a system account behind the scenes.)

SOLUTION

Add the users that should be able to install your custom apps to the site permissions of the App Catalog site, with Read permission level. In my case it was “Dani Alves” (yes, I’m a Barcelona fan).

Adding Read Permissions to the App Catalog

Now, the app is visible in “Your Apps” when you try to add it to a site. Yeah!Custom App Is Now Visible

Personal Branding for Developers Talk at MVP Open Day 2015

Last Friday, March 13th, I had the opportunity to speak about personal branding for developers at the Microsoft MVP Open Day for Spain, Portugal and Italy MVPs in Palma, on the beautiful island of Mallorca.

Edin Kapic Personal Branding for Developers TalkPhoto by Miguel Ángel Cantero

The choice of topic is very intentional. I firmly believe that building a personal brand is one of the best ways to differentiate yourself from the rest of the fellow experts. It doesn’t make you look famous, but it makes your unique message clearer and more available.

The talk was very well received. I had a lot of follow-up questions and discussions, which is in itself an indicator that the talk was needed.

Usually, on these meetings there are several technical sessions but I have talked to few fellow delegates who share my opinion that people skills and soft skills are even more valuable for the technology experts. The technical topics are our staple, but the other topics are many times unknown or misquoted at best.

You can find my slide deck posted at my SlideShare account.

Personal Branding for Developers from Edin Kapic

 

What do you think about the personal branding as a developer? Are you engaged into it? Would you like to see a series of blog post about personal branding for developers here on this blog? Share your thoughts in the comments!

Lightswitch Deep Linking and Navigation in SharePoint Dialog Frame

Another one of my strange adventures with Lightswitch has made me look deep inside the navigation framework that Lightswitch uses. I will explain the strange symptoms, the cause I found out and the solution that worked for me.

SYMPTOMS

I have a Lightswitch app connected to SharePoint data. I have several screens, one for each list that is managed from Lightswitch. I want to be able to navigate straight to the screen I want from SharePoint, or to deep-link the screen.

To do so, I made a custom Promoted Links list. I added to this list my LS app deep URLs, such as https://appurl/HTMLClient/default.htm?SPHostUrlaaa&SPAppUrl=bbb&SPChromeColor=ccc#/ScreenName/[unique_number]. The ScreenName parameter is different for each screen, obviously. I also configured each link to open in a SharePoint dialog window.

Strange things happened. While I could open the desired screen by clicking on the promoted link, it would start displaying “Error Loading Page” message and keep a /spinning circle icon alive as if it were waiting for a long-running operation, after every navigation to and back from another screen or popup in the app.

image

These symptoms would disappear if the links were opened without dialogs (in the same tab or another browser tab). They would also disappear if I switched to another screen inside the app using the Lightswitch navigation menu.

CAUSE

I first suspected any custom JS files I added to the application. However, it was not until I used Fiddler tool to investigate the requests my app was doing that I found the answer.

Lightswitch app are Single-Page Applications (SPA). They leverage jQuery Mobile framework for Lightswitch navigation and maintaining app state in the browser. jQuery Mobile has a custom navigation feature that overrides standard browser navigation stack to be able to use Back button to go to the previous screen. In a SPA, there is only one “physical” page (default.htm) and all the further requests are done using AJAX calls to the LS backend services.

Fiddler showed me that the error messages were caused by a 404 HTTP not found response to a unknown page that was something like this: /ScreenName/IsDlg=1.

By opening any URL inside a SharePoint dialog, SharePoint automatically adds IsDlg=1 to the URL. It is used by SharePoint to hide any extra chrome such as navigation and toolbar from being displayed inside a dialog. So, my original URL was now changed to as https://appurl/HTMLClient/default.htm?SPHostUrlaaa&SPAppUrl=bbb&SPChromeColor=ccc#/ScreenName/[unique_number]&IsDlg=1. I could now reproduce the error even without SharePoint dialog, just by adding an extra query string parameter to the LS deep link URL and pasting it in the browser address bar.

Well, jQuery Mobile powered Lightswitch navigation seems to break when trying to parse a screen ID that follows the # sign and then finds another query string parameter such as &IsDlg=1. I tried to move the IsDlg parameter to the left of the screen ID. It worked, and I saw that I had to fix the URL in order for the navigation to work.

SOLUTION

I first thought of rewriting the LS URL by adding a custom HTTP module or a IIS rewrite rules but it sounded too cumbersome. I had to find a simpler mechanism to achieve the opening of a specific LS screen in a SharePoint dialog frame.

Thanks to my colleague Sergio Gallego, I was able to find a solution. I made a copy of the default.html page in LS and called it screen.htm. I then changed the ready() event handler inside the page to check for a query string parameter called “s” (for screen). It would then pass the parameter value as a parameter to the LS msls._run() method. This method takes an optional string parameter that is then used to start the LS app and open the screen with that same name.

I had to rewrite my URLs to the following schema: as https://appurl/HTMLClient/screen.htm?SPHostUrlaaa&SPAppUrl=bbb&SPChromeColor=ccc&s=ScreenName.

Here is the full code of the ready() method in the screen.htm file.

Lightswitch Custom Validation Refresh

I found an odd problem this week in a SharePoint-enabled Lightswitch HTML Client application. I am sharing the solution here in case there is somebody out there with a similar situation.

SYMPTOMS

You have a Lightswitch HTML application (banner definition in my case). You use custom validation function in beforeApplyChanges function.

Your validation works! However, when you try to correct the field that is being validated, the Save button doesn’t work anymore and it keeps the custom validation message on the screen (it says in Spanish that the end date has to be later than the start date).

image

Furthermore, you get an error message that says “Cannot continue. There are validation errors on the page”.

image

CAUSE

Apparently, Lightswitch code generator attaches the validation refresh on control events such as focus, blur, keyup etc, but only on default LS validations (data type, length, required fields and similar).

Custom validations on beforeApplyChanges are not refreshed on data changes in the controls and due to the page being in invalid state, the Save button doesn’t trigger the beforeApplyChanges function again. It’s a kind of a subtle bug in LS code generation that causes deadlock: we can’t save because the validation isn’t firing and it isn’t firing because we can’t save.

SOLUTION

Well, the best solution would be for Lightswitch to expose an additional hookup point for custom validation, one that should be refreshed automatically with any control change. However, it is improbable that it would ever be included in Lightswitch code.

The available solution for now is to register a change listener for those properties in our screen that trigger custom validation. Once the value is changed, we remove the validation errors for that field if there are any. This ensures that the Save button will work, triggering the custom validation logic again. We can hook up the change listener in the screen created event.

However, we have to be careful to unregister the change listener when the screen is closed. This technique is explained in this MSDN Forum post by Huy Nguyen.