Ionic framework alternative uses


#1

Hi all,

I’ve been using Ionic to build UIs for Google Sheet add-ins and Microsoft Office add-ins. So far its got great results. There is one problem Ive been having and thats with scrolling. The scroll wheel values have been dampened to allow touch events to take precedence.This makes sense to do on a mobile device, which is the aim of the framework. Im wondering if its possible to do a global override of the dampening value to reset it to allow scrolling to work as normal in a web environment?

This is a simple poc to test to see how far we could push ionic in the app scripts:

Any help would be appreciated. Also a shout out to the core team and contributors to the core team for a great framework of ui tools and patterns! :vulcan:


#2

you could deactivate jsScrolling with the $ionicConfigProvider in your config-block.

$ionicConfigProvider.scrolling.jsScrolling(false)

So native over-flow scroll is used for all ion-contents.

You should also activate the user-select. this is a css-attribute ionic deactivates so you can not select any text for copy and paste :wink:


#3

Thanks @bengtler :slight_smile: Worked like a charm. :laughing:

If you’ve any other ideas for changes we could make to default behaviours, I’m all ears.


#4

And add an initial loading spinner or something similar… so you do not have to wait 5 seconds on a blank screen :smiley:

Block login form if you are authorization with a third party system. Clear history if you logged in --> and add a logout button somewhere.

But nice Demo at all.


#5

Hi, I’m Clief, now I just start working on Ionic and also a newbie in Ionic and Office add-ins.
I am interest with your work to integrate Ionic projects with Office add-ins. But How do you put it (your Ionic project) together into office add-ins. Where did you host your Ionic Project? Should we keep it running with “ionic serve”?

Thanks for your kindly response


#6

Hey @bengtler, Sorry I only saw this now.

Unfortunately I cant add a loading screen screen as the delay is caused by the google service and not the app itself loading. :unamused: The google caja compiler rewrites your code to look for security flaws in the html and the imports.

Yup we’ll be working on the login/logout and the rest of the functionality now we have it running across all office platforms :slight_smile:

Thanks for the help again!! :vulcan:


#7

Hey Clief,

The first thing to realise about ionic is that its just angular. The rest of the tooling doesnt help too much when building plugins. I just make use of the stylesheets and components/directives (you will not be bale to use cordova plugins, etc).

If youre just talking about MS Office then you treat the the ionic app as if you were building just another angular app. The MS Office dev team have a lot of blog post and demos on this (id advise taking a look as theyre quite comprehensive).

If youre looking to run it in google docs then there is a lot more work. You need to have all the script and css files externally hosted and then have your index.html load them all in. From here you can follow the normal google docs tutorials.

I recommend hosting youre plugins script files on S3 as you can then use Cloudfront as a CDN with little to no hassle. (dont use ionic serve)

If youre looking to have a single app deployed to both then there is a significant amount of work in it. Honestly I could write a book on the build and deploy process. If there is a part in particular that you need help with then feel free to ask and I can probably help.

Hope this is of some help! :slight_smile:


#8

Hi jdrew1303, thank you for you kindly response.
so, you are doing a tremendous work, it will be nice when you write a book or an e-book. Lol

Actually, this is first time for me to try office add-ins.
What I’m trying is, to make an Outlook Online Add-Ins.
I still missing the parts, how to embed our apps, from our own web host to outlook add-ins.
Do you mind to help me how to done that parts?

Thanks