PDA

View Full Version : Custom js



flado
17-Aug-2017, 02:34 AM
Hi
I am just trying out the DF4WP plugin and I like it! :-)

However, I have a question. I am using custom js in my webapp and when trying to load the webapp from within the wordpress site i get the following error
11255
Of course, I have the js included in the html-file, but it seems the wordpress site wants it somewhere else?
How can I fix this?

thanks in advance!

flado
17-Aug-2017, 08:35 AM
OK solved with the help of Johan Broddfelt! Thanks!
had to add references on the wordpress side to these .js-files

Mike Peat
18-Aug-2017, 08:16 AM
Leif

Glad Johan was able to help you out. :)

For everybody else, what the plugin does is replicate the stuff your app's Index.html usually does, with some extras, but into the generated WordPress page. It does this via a PHP file called df4wp-page.php which can be found two ways:



In your <WordPress-install-root>\wp-content\plugins\dataflex4wordpress\df4wp-page.php
From within WordPress, login as an administrator and on the left-menu, go to Plugins --> Editor. Select the "Edit" link under the DataFlex4WordPress plugin and then on the right-pane, the df4wp-page.php file


In it you will find: function df4wp_webapp_page. This, among other things, builds up a string array called $df which will eventually be written out to the WordPress page. Around line 103 you should find:



array_push($df, "\n <!-- DataFlex Custom Controls (do not remove this line, used for automatic insertion) -->");

// Use the sizeFix.js script:
array_push($df, "\n <script src='", DF4WP_PLUGIN_URL, "/js/sizeFix.js'></script>\n");



Here you can add any special JavaScript your app needs, using (obviously) the same approach of building it into the $df string:



array_push($df, "\n <script src='" $apppath, "/RelativePathToYourJavaScriptFile'></script>\n");


The $apppath variable will hold the URL of your application (whatever would usually precede "/Index.html" when calling it), so that, with what follows it (where I've written "/RelativePathToYourJavaScriptFile") appended, should find your file. If it doesn't, your file will not get loaded. Getting this right may involve a bit of trial and error. :(

Do that for as many JavaScript files as your app requires.

Take care with this (backup copies would be good!), because any typos may stop your WordPress site from working at all (PHP is a good servant, but a horrible master!). Especially take care with the usage of the two different types of quotes.

As I am writing this, I'm thinking that maybe we should include this as a new pipe-separated string setting in the shortcode, to shield developers from the horrors of editing PHP. Something like:
customJS="js/MyScript1.js|custom/js/MyScript2.js|js/MyScript3.js"

We do need a new version of the plugin to work properly with DF 19 anyway and so this might be a good time to add such a feature. Opinions solicited.

Mike

Ianv
18-Aug-2017, 04:52 PM
Mike,
That would be good I was about to look at making that mod myself. Sometimes you need css specific to your custom js so it would be useful to allow this, too.

Ian

Mike Peat
19-Aug-2017, 09:35 AM
Yup, I agree. So two new pipe-separated settings: customJS and customCSS.

Mike

wila
19-Aug-2017, 04:00 PM
Hi,

Don't know how hard it is, but nowadays most themes have a page for adding custom CSS to apply to your theme.
It makes it very very easy to tweak and no breakage when updating the theme which is quite important as you want to run those automatic if you can.

An example, it is usually here:
11267

and you can add things like:
11268

It even checks your CSS and if you make a mistake like forgetting a curly bracket it will tell you.
As it is in pretty much every standard theme nowadays I suspect it is standard WordPress.

For adding javascript something like this would be superior, you can check if the file exists etc.. but that might be too much work I don't know.
Just pointing out that the above works very well and that I use it all the time for my customers.

edit: this was meant as a reply to Mike, but the forum software is a little silly and attaches it elsewhere yet again.
--
Wil

Ianv
19-Aug-2017, 04:52 PM
Wila,
The point here is that the Cusom.js applies to the DF application that is run from the Wordpess plugin, not to Wordpress itself. Therefore the javascript must be in the DF workspace and be accessible from the AppHtml directory. The modifications which Mike is suggesting will end up being written into the Index.html "file" which the plugin generates to run the DF application/view.

Ian

wila
19-Aug-2017, 06:46 PM
Ianv,

That doesn't really invalidate anything I said. The plugin is part of the Wordpress site.
While you can't test for the .js file locally you can still use curl or whatever to test if the remote .js file exists. It has to be accessible right? otherwise it's not gonna run in your browser.

My main point was that I don't like having to edit files in a wordpress configuration.
From a management point of view that is simply not ideal, users mess up, break things and by feeding it through a configuration option you can prevent breakage and thus head aches.

Anyways, I was just providing another point of view.
I don't use DF in WordPress and because of the current licensing costs around DF for webapp I doubt that that will change even while it seems somewhat interesting.
But that's a completely different discussion and I do not want to take this too far off topic.
--
Wil

Mike Peat
20-Aug-2017, 12:30 PM
Wil

I'm not seeing that option on my WordPress site (localhost). I even updated to 4.8.1 and added the Twenty Seventeen theme, but I don't see that "Edit CSS" link on the menu:
11269

Maybe there is something I need to enable.

Mike

Mike Peat
20-Aug-2017, 12:36 PM
OK, found it... it is under "Appearance" --> "Customize" --> "Additional CSS":
11270

Mike

wila
20-Aug-2017, 12:51 PM
Yep, that's it. It is very cool, doesn't suffer refresh issues, hardly ever needs !important to override settings either.
Really handy and I suspect it will work for your plugin out of the box.

--
Wil

Mike Peat
21-Aug-2017, 02:31 AM
Wil

Thanks for pointing that out - very useful, I suspect, especially since different themes may require different CSS "tweaks". I'm especially taken with the fact that changes will survive theme updates, which seem to happen all the time.

That said, I intend to implement (actually have already done so in my development version) a customcss setting in the shortcode as well. I was doing one for customjs and it seemed to make sense to do a customcss one alongside it. I would see this being used for custom CSS required for styling application aspects which would go with custom JavaScript components, rather that tweaks to overcome CSS conflicts between the DF theme and the WP theme, for which I think your solution is the better approach.

Mike

flado
24-Aug-2017, 01:38 PM
Mike
thanks for doing this. When do you think you can have something ready for df19 with the custom js stuff in it? :-)

Mike Peat
25-Aug-2017, 03:55 AM
Leif

The issue is less of development time as testing time. I may do some kind of pre-release alpha for any willing to test in their environments. That I could probably have ready in a few days.

Mike

flado
25-Aug-2017, 06:00 AM
Hi Mike. I’d be willing to alpha test it :-)


Skickat från min iPhone med Tapatalk

Mike Peat
30-Oct-2017, 07:11 AM
OK Leif (and anybody else who is interested)... you asked for it! :p

Here is a minimally (well, perhaps a little more than that) tested DF4WP for DataFlex v19.0. The ZIP contains two other ZIPs: the plugin (dataflex4wordpress.zip) and the library workspace (DF4WPlib_190.zip).

The plugin should, as before, be uploaded as a zip to your WordPress site (Dashboard --> Plugins --> Add New --> Upload Plugin --> Choose file ... select dataflex4wordpress.zip ... Install Now --> Activate Plugin).

The library workspace you should unzip, then use as a library from your app's workspace, making the following changes (along with appropriate Use statements) to your app:



cWebApp --> cWPWebApp

Set psWPEncryptSecret to "whateverIsInSecretInTheDF4WPDashboard"
Use WebResourceManager.wo --> Use WPWebResourceManager.wo // important for getting various pathing right


cWebView --> cWPWebView
cWebModalDialog --> cWPWebModalDialog
cWebImage --> cWPWebImage
cWebColumnImage --> cWPWebColumnImage


The latter two are only required if you are loading the images using the older technique of having them under the AppHTML directory and using a relative URL, rather than using the DownloadURL of the WebResourceManager technique, which is taken care of in WPWebResourceManager.wo.

In addition, when making reference to other local web-available resources (things you would normally load by relative URL from your AppHTML directory or subdirectories of that), amend the setting to be (FQUrl(ghoWebResporceManager, relativeURL)) rather than just relativeURL. This will dynamically replace relative URLs with fully qualified URLs (getting it right, I hope).

Read the plugin help (now prettier, I hope :)): there are a couple of new shortcode settings: customjs and customcss (always use lowercase).

11410

Enjoy... and please let me know at once if you discover any bugs.

Mike

Ianv
14-Feb-2018, 01:08 AM
Read the plugin help (now prettier, I hope :)): there are a couple of new shortcode settings: customjs and customcss (always use lowercase).


Hi Mike,
there didn't seem to be an updated Help file in the download.

Ian

Mike Peat
14-Feb-2018, 04:56 AM
Ian

The "Help" is the plugin's "Help" page in WordPress (in the Dashboard "DataFlex" section), not in a Help file as such. (Well, it is in a file - something like: C:\inetpub\wwwroot\wordpress\wp-content\plugins\dataflex4wordpress\df4wp-help.php, but it's a lot easier to look at it in the WordPress dashboard!)

Mike

Ianv
14-Feb-2018, 10:37 PM
Duh, thanks Mike. I wondered what that Menu item was for.
Ian