Tom.

It's just a default text field with the HTML Entity Encoder enabled.

Hello, I'm revisiting a project using this and I'm having some issues. In this example I'm using "job_title". From what I can tell everything is in place. For what reason am I receiving this error? @dadish

DELETED

Hi @dadish Would it be okay if you PM you regarding this? I would like to create a module to enable JWT auth. I have it working by modifying the source code but I would like to create it as a module so others can use it easily and I also don't want to miss out on any bug fixes or updates as I've modified the module.

Interesting, what would you do that for? I would be more than happy to implement the authentication flow above and ship with it? That would suit most peoples needs. It would make it more feature rich out of the box.

Hi @dadish, That may explain a lot, Chrome has very strict rules when it comes to CORS. I have been looking at different systems such as Strapi which is designed to be Headless and that uses this method: So it returns an Authorization code that could be stored in Local Storage then passed into future requests using the Authorization header. This could be implemented into ProcessWire with a custom field on the User page for jwt and generating a key if a successful login was made and returning it to the user. graphql.php could then check if the authorization header has been passed and if it finds a matching jwt code - force log them in before processing the query. Seems really simple to implement. I'm unsure whether it's worth shipping with that functionality or have people build it in? What do you think @dadish?

@dadish could you please get back to me on this?

Interesting, this is the exact same implementation that I'm using however it's not keeping the cookie. May I ask if you are using Node JS server? I believe this may be the reason it's not working as mine is apache with vanilla JavaScript. I could prefix any call I need to be authenticated with the login query, my only concern is that would require using localStorage to keep a session alive but it isn't secure to store the login password. Have you had any success using vanilla JavaScript running on Apache @dadish?

Shameless Bump ?

Didn't work for me, maybe it's an issue with Fetch API. What do you use to make your HTTP requests? EDIT: Better still, could you provide me with example code where you have CORs working through JavaScript requests? That would be super helpful as I've tried so many different things and really struggling with this. I do a request to login, but after that any other request is logged out. Are you meant to include the login request with every request? I'm struggling to understand the "cookie being include with every future request" as that part just doesn't seem to be happening for me. @dadish

I found out the issue, I also needed to add the parent to the list of templates exposed to the GraphQL API. Thank you for your help ? @dadish I'm currently struggling now with the authentication flow. I'm using JavaScript Fetch API (https://graphql.org/graphql-js/graphql-clients/? function graphQL(query) { const url = 'https://phpstack-389529-2027697.cloudwaysapps.com/graphql/'; return new Promise(resolve => { fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ query: query }) }).then(response => { console.log(response); resolve(response.json()); }); }); }; I'm then logging in, passing a query then logging out for user submission: // Login graphQL(`{ login(name: "api-user", pass: "api-pass123") { statusCode } }`).then(result => { // Submit Data graphQL(submitQuery).then(result => { // Logout graphQL(`{ logout { statusCode } }`); }); }); submitQuery is the follow: mutation { createEntry(page: { parent: "1044", title: "Test", name: "Test", address: "23 Common", link: "", manager_name: "twgew gweg gwe", manager_email:"wgwe@gwegwe.com", phone: "7547037473", cards: "20", offers: { add: [{ title: "ewwfeefwfwefew" },{ title: "eerefgger" },{ title: "eregrer" },{ title: "ergeregre" }] }, terms: "fewfewwfe" }){ manager_name } } Which is returning the error: message: "Schema is not configured for mutations." When using GraphiQL I can get that error by not logging in first, if I login then run it it works fine. I've checked the login and it does return 200 login successful. But from what I can tell it's not actually setting any cookie or anything so the second query fails. Do you know how to get this working @dadish EDIT: For now I've just done this on the graphql.php file which works, it's not ideal but I'm a tight deadline ? <?php namespace ProcessWire; header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: *"); header('Content-Type: application/json'); $session->login("api-user", "api-pass123"); echo json_encode($modules->get('ProcessGraphQL')->executeGraphQL(), true); $session->logout(); EDIT 2: Been doing some research and you have to include do the following with the fetch from what I understand: function graphQL(query) { const url = 'https://phpstack-389529-2027697.cloudwaysapps.com/graphql/'; return new Promise(resolve => { fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, credentials: 'include', // INCLUDE CREDENTIALS body: JSON.stringify({ query: query }) }).then(response => { console.log(response); resolve(response.json()); }); }); }; I have corrected my cors headers so it doesn't return an error, but it's still not working. Have you had any success having the login work cross-origin? I imagine so as this is a pretty common use case for use an API cross-origin.

That's amazing, thank you. Also, I'm logged in as Admin (superuser) and I can't seem to use the mutation to "create" only "update" and I can't seem to find the reason why. How do I add the ability to create pages? Also is there an option to create pages but not edit them. It isn't possible with the permissions on ProcessWire, but I wouldn't want people exploiting the API and editing content, but I would like user submitted content. e.g. storing form submission data. Thanks, Tom EDIT: Type in the settings part under "me": "Adds me query field. Allows user to query her credentials." Should be "Allows user to query their credentials."

This is great! Having a play with it now. I'm still getting my head around things, but I can't figure out why this isn't working: <script> fetch('https://phpstack-389529-2027697.cloudwaysapps.com/graphql/', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ query: `{ venue { list { title } } }` }) }) .then(r => r.json()) .then(data => console.log('data returned:', data)); </script> I have enabled CORS on the graphql.php file: <?php namespace ProcessWire; header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: *"); header('Content-Type: application/json'); echo json_encode($modules->get('ProcessGraphQL')->executeGraphQL(), true); But I'm getting the result: message: "Cannot query field \"venue\" on type \"Query\"." But I can use GraphiQL to do the same query and it works as intended: What am I doing wrong here? EDIT: Figured it out, I needed to give Guest permissions to access. I was wondering how do you do the login flow through JavaScript so I can make requests that only certain users could view, I like the fact that this uses ProcessWires permission system! Very clever.

Hello guys, I have updated a client website to V3 but now FormBuilder 0.2.2 is no longer functioning even though it states compatibility with V3. They had a freelance developer build the website so they aren't able to update it and neither am I. I can rollback the website, but they are wanting to use some modules that only support V3. I was wondering what the process would be? I have access to the licence key. Thanks, Tom EDIT: Was able to edit the source code and fix it.

Hello, I haven't actually used ProcessWire for a while as I've been using Webflow to build websites recently. I am actually looking at doing my own version of Udesly that interfaces with Webflow, so people can export from Webflow to make ProcessWire themes... Anyway. I was wondering why the example of Text Tags uses: $wire->addHook("/find-field_options/", function($e) { $q = $e->input->get("q", "text,selectorValue"); if(strlen($q) < 3) return []; return array_values($e->pages->findRaw("parent=/tags/, title%=$q, field=title")); }); I thought the correct way of using findRaw is: $e->pages->findRaw("parent=/tags/, title%=$q", "title")

@Rudy are you able to provide any example on how you may paginate array to prevent long execution times? I have done imports before, but when the data get's too large it can take a while to load. How would you automate the pagination without also running into long execution times?

I need the image to fit inside an area without any cropping applies. Much like applying the CSS property object-fit: contain. I would assume setting cropping to false will stop any cropping being applied but in fact it doesn't do anything. I see when I change other values it will get a new file name of 300x300e for example if cropping is set to east. If it's set to false, it has no effect on the file name or image.

I'm having the same issue. I'm declaring the doctype but it will not output to browser. I was searching everywhere until this post came up on Google. Maybe it's a ProcessWire issue? I can't get TinyMCE working because of it on my front-end. EDIT: It's because debugging was turned on and an error was being output before the doctype was declared.

Hello, I believe I found a bug (https://processwire.com/api/ref/wire/wire/); // Create a new API variable named 'widgets' $this->wire('widgets', $widgets); This didn't work but. // Alternate syntax for the two above $this->wire()->set('widgets', $widgets); Did work. This was in the `init.php` file using just `wire()` not `$this->wire()`. Anyone else had this issue?

I remember a blog post about create image fields. I can't find it in the documentation - https://processwire.com/docs/fields/images/ I know that actually most of the documentation seems to exist in the blog posts, but I can't find the blog post relating to it. Does anyone know off the top of their head what version this was? EDIT: Found it - https://processwire.com/blog/posts/pw-3.0.142/

Here is a crazy one for me. I've worked with ProcessWire for years and I have never come across this. I had my website installed on one sub-directory and I moved it to a different one, but all the links in the admin panel other than the home and edit page buttons are linking to the old sub-directory. I always believed that the urls were relative. Has anyone come across this before? I don't know where to look to fix this as the url isn't anywhere like it would be in WordPress for example. I've tried refreshing my cache. EDIT: Nevermind, tried incognito and it worked fine, so it must be a caching issue.

You can get UIKit purged down to ~25 - 40KB.

Hello everyone, Recently I spent some time researching how I can update my workflow. I really enjoy working with TailwindCSS however, when it comes to Javascript, I often find myself having to search around to find a good package. Often I find myself having a package for lazy loading, a package for sliders, a package for animation, a package for parallax and a package for ajax. Before you know it, you are worrying about dependicies, conflicts and vunrabilities for many different packages. Since the push is to get rid of jQuery and use native javascript, often each will have their own utility classes, some of which do the same thing. This adds a lot of bulk to the website. This is what I love about UIKit, it provides plenty of functionality for a small ~130KB unminified. Not many know this, but the UIKit helper classes are exposed via the API too. So it means you will not have to worry about your javascript working cross-browser (https://github.com/uikit/uikit-site/blob/feature/js-utils/docs/pages/javascript-utilities.md). The perfect thing would be to combine UIKit and TailwindCSS, but the best way to achieve this is up for grabs. I personally use TailwindCSS base and implement components from UIKit. I then use PurgeCSS on the CSS file to make sure anything unused by either UIKit or Tailwind isn't making it to production. I do this using Parcel JS. I have used Webpack and Gulp previously, but I find Parcel is a simple and easy way to get a project started (and it's fast!). The next thing I've found is UIKit is not always the answer. There are now more than ever better ways of achieving things in browser. Such as CSS Grid, `position: sticky`, and `object-fit` try to use these CSS alternatives where possible. Purge will always make sure that you get the smallest possible file size, so avoid using the uk-grid element where possible and use CSS Grid. I have setup a github starter template (https://github.com/TomS-/UIKit-TailwindCSS/tree/master) if you want to have a look at it. CSS Grid will introduce intrinsic design (https://www.youtube.com/watch?v=lZ2JX_6SGNI - Great series) Next will be to use WebP, there is plenty going around on the blogs now about this, but this will make a massive improvement to your Google Page Insight rating (https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.tikari.co.uk%2F&tab=desktop). I would love to hear your web manifesto - and ask me anything about mine ?

Hi Jeevanish, For the most point some of these are just buzz words. Headless CMS is basically the CMS exists away from the website and talks via an API such as JSON / XML / GraphQL (This allows you to use the data anywhere on the web or an internet connected drive, lets say for an APP) Hybrid CMS is something that seems relatively new, and it seems to be that Headless CMS doesn't have great editor functionality, hybrid seems to be a buzz word around it's a great easy to use CMS with Headless functionality, I guess if you installed GraphQL to ProcessWire it would be considered hybrid. Digital Experience Platform seems to be a platform that all talks to each other using different mediums. Lets say you have a train station, that system lets you book a ticket, that then updates a message board letting them know how many tickets are left, which updates their website and also sends to the ticket attendents which shows that the ticket is for that train. This is just an example. This system can be accomplished with Headless or Hybrid.

I'm talking about the granularity of the margin/padding's but also how hard it can be to follow the classes, without changing my markup to something like: <div class="m-2 md:m-4 lg:m-8 p-2 md:p-4 lg:p-8 block sm:flex sm:align-middle lg:align-top sm:text-center lg:text-left"> <h2 class="mb-2 md:mb-4 lg:mb-8 text-md md:text-lg lg:text-xl"> Title </h2> <p class="mb-2 md:mb-4 lg:mb-8 text-sm md:text-md text-grey"> Some text here </p> </div> I find that when it becomes inline it becomes hard to follow. Personally when I think grid becomes more widely accepted, there is going to be a combination of grid and utility first-css. If I'm understanding correctly, when I took this approach, I felt it overkill for the simple websites I create. For web apps I can see how this would work as it has level of complexity to it. Twitter I have no doubt will be taking an approach similar to this. Personally I currently use "snippets" and include them in PHP with ProCaches static caching to help the server response time. I've been hitting 99/100 on Google PageInsights with this method.