Important Update For Your App’s Custom Code

Announcements
1

We are changing the way we store and load your application’s custom javascript/css in order to help reduce the size of application schemas. This change alone doesn’t improve page load times for everyone, but it does put us in a better position to leverage more technologies that will have a larger impact in the future.

Release Timeline

On 10/21/2021, we will release the update for the builder to support the new storage method. The live application, however, will continue to load custom code using the original storage method.

On 10/28/2021, we will release the update for the live application. It will now use the new storage method to load the custom code.

Are there any breaking changes?
Only if you are accessing your custom code outside of the builder or live app through undocumented means. Because the code is no longer in the schema, it will no longer be found in Knack.app.attributes.settings

If you still require access to your code outside of the builder or live app, you’ll be able to access it through the CDN once this goes live:

https://appcdn.cloud-database.co/<your_application_id>/custom/main.js

https://appcdn.cloud-database.co/<your_application_id>/custom/main.css

Do I need to make any changes to the custom code before this release?
No, you will not need to make changes to the custom code. It will continue to work as it was prior to this release.

Am I going to lose access to the code editor in the Builder?
No, the code editor will continue to be available. This update will only change how your custom code is stored.

If you have any questions, please don’t hesitate to reach out here or to support@knack.com.

2 Likes
2

Adding a few more answers to questions we’ve fielded from some customers. If anyone has any other questions, do let us know!

Will LazyLoad still work?
Yes, all of our supported javascript features and libraries will continue to work.

I copy/paste the HTML source code instead of using your official embed codes. Do I need to change anything before this release?
While we don’t support this method of “embeds”, the custom code is loaded dynamically after Knack loads, so you won’t have to make any changes to continue using your app this way.

1 Like
3

Does anyone know of someone who can help us with a broken app due to Knacks changes with the builder? We have an app that supports our small business of 10 employees and the app becomes essentially unusable without the CSS that we have implemented. The CSS is no longer being recognized and we are trying our best to use the app as it is. This started this morning.

Any recommendation would be great. I guess this article came out two months ago, but since we are not technology centric, and there were not bold words that said “hey, we are making changes that will completely break your app soon so watch out and get ready to spend money to fix it”, we did not pay enough attention.

Second question. If we purchase a private server, will our app be left alone with these new changes? Our number one goal is stability. It works great just as it is.

1 Like
4

Hey so I know you guys launched whatever change you did today and my stuff was still working fine for a bit but now it is not.

I have my stuff load from external files because keeping everything straight in the code editor is too much. I do this using the lazy load function in the documentation.

I had to add jQuery to my lazy load since I started getting a slew of $ is not defined errors this morning, that fixed those

I can see all my code is loading in the console

CleanShot 2021-10-28 at 10.45.26@2x
CleanShot 2021-10-28 at 10.45.26@2x896×126 5.76 KB

And I added a super simple function to test.

$(document).on('knack-view-render.view_205', function(event, view, data) {
	console.log("view rendered");
});

But this is not working.

All of my custom code was working yesterday and I did not change anything between now and then.

Edited to add, when I removed the knack-view-render function everything started working again.

5

Moving some of these issues into this topic so we can consolidate. Please know that the team is aware of and actively working through any remaining issues that were presented with today’s deployment related to the way we store and load custom code.

The best way to get specific help is still reaching out to our support team through our in app messenger, or email at support@knack.com so that we can collect more specific information to help troubleshoot what you’re experiencing.

We apologize for any trouble this caused, and thank you for your patience as we sure everything up again.

6

@Joel - targeted messaging was sent out specifically on this change for users who we knew would be affected based on use of custom code. It should not have broken anything, there was an unexpected issue that came up right after deployment and was quickly fixed.

The breaking changes that are discussed in 📣 It's time for an improved live app! - #26 have not been made yet, and there will be ample time to prepare, and mitigate any issues.

Please reach out to our sales team (via our regular support channels) if you are interested in discussing your stability needs. Thanks so much!

7

As of about an hour ago, the final fix was put into place for the remaining issues related to today’s deployment. With certain customizations involving scripts, there was an order of operations issue with how the files were loaded.

We expected a seamless deployment, but as is the nature with custom code - there were some unexpected circumstances that needed to be resolved retroactively. We truly appreciate everyone’s patience.

Please reach out to support if anything else comes up related to your applications’ custom code or anything else, per usual.

8

Hi there! I’ve been using the below code posted in this thread for ages on a few of my apps and it seems today’s change broke them - which is odd, because it appears to just be some simple CSS used to make the menu move to the left hand side (helpful with the number of menu items a couple of my apps use. Any help would be appreciated!

A different approach here to make this work in the new theme - this simply forces the mobile menu to be displayed permanently at widths > 768px, and happily doesn’t require javascript at all. Other things this does:
Sets the sidebar below the app title.
Hides the mobile account settings (.kn-mobile-account-container) - they remain in under the app title bar.
Sets the scene to scroll vertically so the app menu and sidebar stay locked.
Hides the usual horizontal menu (#kn-app-menu).
Allows the usual mobile menu to work for widths < 769px.
@media screen and (min-width: 768px) {
html, #knack-body {overflow-y:hidden !Important;}
#knack-logo {padding: 0.5em 0;}
#kn-mobile-menu {left: 0; top: 60px; width:150px; font-size:inherit; background-color:#ebebeb; box-shadow: inherit;}
.kn-scenes {left:150px; width:calc(100% - 150px); position: relative; height:calc(100vh - 60px - 40px); overflow-y: scroll;}
.kn-mobile-account-container {display:none !Important;}
#kn-app-menu {display:none !Important;}
}

9

my custom code is still only working about half the time.

10

Hi,

My custom CSS codes are overwritten by the default settings, e.g. set max-width for “.kn-container” or “.kn-table” are not working anymore. I don’t think it makes sense to override the custom codes by default settings if you call it “custom codes”.

Please let me know if it is your intention or a bug?

11

Same issue here…

12

Same here. It broke about every visual edit. And also things that weren’t customized at all, such as the header.

13

I also had a client with width issues. I put this in to override a [new] max-width of 1200px that somehow got introduced… this fixed it for us:

/

* *** HAD TO ADD THIS AFTER KNACK UPDATE ON 10/28/21 *** */
@media screen and (min-width: 1180px) {
	.kn-container {
    max-width: 2000px!important;
	}
}
14

I also had a client with width issues. I put this in to override a [new] max-width of 1200px that somehow got introduced… this fixed it for us:

/

* *** HAD TO ADD THIS AFTER KNACK UPDATE ON 10/28/21 *** */
@media screen and (min-width: 1180px) {
	.kn-container {
    max-width: 2000px!important;
	}
}
15

Generally speaking, you should be able to resolve CSS issues by making your CSS rules more specific (for instance by using !important).

If you are still experiencing issues related to your JS, please do reach out to us directly at support@knack.com and we can help you out.

16

Isn’t there a better way to handle this? I’m working with multiple apps with 100s of lines of css edits that were working till the update…
Based on what you’re saying, we have to go and add “!important” to every single line…

2 Likes
17

Hello! I also have problems with the css. The page looks completely different to what it was when I first log in in the morning or when i log in from an incognito window. After doing ctrl+f5 my css shows up and the app looks as it should.

How can I fix it? As Arjun does, I do not want to alter my main.css completely, I just want it to take preference over the default css. Since it works well after a ctrl+f5 I asume there has to be a simpler way to fix this other than altering my css.

18

Will the new way that custom javascript/css is stored and loaded also solve a problem I’ve been having? The problem is that when I have the builder open in two tabs in my browser (for example, one to edit the data and one for the Javascript/CSS), then it happens that changes I’ve made in the Javascript get overwritten when anything changes in the other tab…

19

My embedded app’s custom code doesn’t work at all either.

The embed is done by copy/pasting the home-page source code (as described here: Embed Your App - Knack Knowledge Base).
Subsequently, most of the app is working normally, except for the custom code, along with these errors in the console:

us-east-1-renderer-write.knack.com/api/xdc.html?xdm_e=custom-domain&xdm_c=default8952&xdm_p=1:1 Invalid 'X-Frame-Options' header encountered when loading 'https://us-east-1-renderer-write.knack.com/': ''allow-from' https://us-east-1-renderer-write.knack.com' is not a recognized directive. The header will be ignored.
us-east-1-renderer-write.knack.com/api/xdc.html?xdm_e=custom-domain&xdm_c=default8952&xdm_p=1:1 Invalid 'X-Frame-Options' header encountered when loading 'https://us-east-1-renderer-write.knack.com/': ''allow-from' https://us-east-1-renderer-write.knack.com' is not a recognized directive. The header will be ignored.
us-east-1-renderer-read.knack.com/api/xdc.html?xdm_e=custom-domain&xdm_c=default8951&xdm_p=1:1 Invalid 'X-Frame-Options' header encountered when loading 'https://us-east-1-renderer-read.knack.com/': ''allow-from' https://us-east-1-renderer-read.knack.com' is not a recognized directive. The header will be ignored.
20

Hi. I’m using the 'Knack recommended ’ method of embedding the full app by copy/pasting the HTML source code in my website. (Embed Your App - Knack Knowledge Base)

The issue i’m facing is that the custom code is not getting loaded at all now!

The errors in the console are like this:

us-east-1-renderer-write.knack.com/api/xdc.html?xdm_e=https%3A%2F%2Felearning.appl-intra.net&xdm_c=default4452&xdm_p=1:1 Invalid 'X-Frame-Options' header encountered when loading 'https://us-east-1-renderer-write.knack.com/': ''allow-from' https://us-east-1-renderer-write.knack.com' is not a recognized directive. The header will be ignored.
xdc.html:1 Invalid 'X-Frame-Options' header encountered when loading 'https://us-east-1-renderer-write.knack.com/': ''allow-from' https://us-east-1-renderer-write.knack.com' is not a recognized directive. The header will be ignored.
us-east-1-renderer-read.knack.com/api/xdc.html?xdm_e=https%3A%2F%2Felearning.appl-intra.net&xdm_c=default4451&xdm_p=1:1 Invalid 'X-Frame-Options' header encountered when loading 'https://us-east-1-renderer-read.knack.com/': ''allow-from' https://us-east-1-renderer-read.knack.com' is not a recognized directive. The header will be ignored.

xdc.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
xdc.html:1 Error handling response: TypeError: Cannot read properties of undefined (reading 'isRedirected')
    at chrome-extension://ahkjpbeeocnddjkakilopmfdlnjdpcdm/snapshot/script.main.js:6518:35
xdc.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
xdc.html:1 Error handling response: TypeError: Cannot read properties of undefined (reading 'isRedirected')
    at chrome-extension://ahkjpbeeocnddjkakilopmfdlnjdpcdm/snapshot/script.main.js:6518:35

How to quickly resolve this?