How to refresh AEM component in Author view after Edit? - reactjs

Am new to Adobe Experience Manager. Your input on below question is highly appreciated!
All I am trying to do is: Refresh author page after making an update to AEM component. The component is built with React.
Open the component dialog
Change the value (for ex: Label)
Click done from dialog
Am expecting author page to load automatically
Please share your inputs. Thanks a lot!

The component doesn't refresh the entire page on save unless you explicitly configure it to. You can probably make use of the cq:editConfig for that. The cq:editConfig needs to have a child node cq:listeners with the property afteredit. Sample structure below
Some info around the edit config can be found in this blogpost.

Related

Link Person to Delve profile page

In my Person components in my React application, I would like to add links on the names of the people it renders.
I.e. when the displayName is clicked on, the user is sent to the profile page in Delve of the person it clicked on. For example https://contoso-my.sharepoint.com/_layouts/15/me.aspx/?mail#contoso.com
I was actually hoping this was a setting on the component or similar, but I see that it's not. Is it possible to achieve this using a template?
I have already set up atemplate, referring to my other thread here: Working example for Graph Toolkit using SharePoint spfx, React and Get component with template.
Please advise.

How to scrape a hidden React component key using selenium

I am trying to scrape a React based website with selenium and python, and i came to a point where, although i can retrieve all that is being 'seen' by Google DevTools Inspector, i am not being able to find the link to the next page i needed to scrape. I could, i guess, do this, in a way where i could click every single button to the next page, although, i was kind of curious to know why selenium has a problem is seeing this particular key and how to workaround this, since i have to build a database and any 'extra' request will add add up exponentially.
Google DevTools Inspect View
As you can see, there is no 'key' or href class anywhere on the tab, but if i look in React DevTools, it is there:
React DevTools Inspect View
So my question is: is there any way i can retrieve those 'keys'?
Are there any better tools to do this job?
Thank you in advance!

React-admin tinymce - how to get content?

I'm an experienced Javascript developer, but new to React, so I'm looking for a bit of help.
This sandbox demonstrates the issue:
https://codesandbox.io/s/distracted-banzai-i46eg?fontsize=14&hidenavigation=1&theme=dark
If you edit one of the posts, (and dismiss the TinyMCE license alert), you'll see the original content and can edit it.
When you edit the text,the new content is passed to the handleEditorChange() function in posts.js, from the custom rich edit component. (Sometimes you to tab out of the rich text for this to happen, which I'm not worried about).
However, if you save the change, the original text is POSTed to the dataprovider (as per your developer tools network tab), which implies the form record is not being updated.
How do I get the form record set to the new value from the editor?
Any help is much appreciated!
Regards,
Andy

Admin-on-rest: how to decrease button spacing and how to edit page without ID in url

I started with admin-on-rest recently and I love what it brings. However, I am stuck on 2 issues and I was hoping to get some help:
Question 1
I created a custom theme with custom color pallette etcetera. How can I reduce the spacing around buttons? You can see it on the demo here: https://marmelab.com/admin-on-rest-demo/#/customers/121, the save button has an indent of maybe 20-30 pixels. Can I remove this and align the button with the input fields, title, etcetera?
Question 2
What is the best approach for creating an /#/user/details/ view for example, where users can edit their own account details, re-using the EDIT component? I have now added this resource:
<Resource name="user/details" edit={EditDetails} />
I can edit the account by going to /#/user/details/ID (replacing ID with the actual user ID). But I don't want to expose the ID. Better yet, the SPA doesn't need to know about the ID at all, because the API can understand a PUT request to /user/details/ as a request to update the current user details. So I don't actually need the SPA to send or need this ID. Any ideas on this?
Question 1: https://marmelab.com/admin-on-rest/Theming.html#overriding-a-component-style
Customizing the Toolbar which contain the button will require a bit a of work in versions 1.*.*. You'll have to create a custom Toolbar using the original as a starting point (https://github.com/marmelab/admin-on-rest/blob/master/src/mui/form/Toolbar.js) and use it as the toolbar prop for your form (https://marmelab.com/admin-on-rest/CreateEdit.html#toolbar). This will be a lot easier in v2.
Question 2: this can be achieved using a custom restClient. In a nutshell, intercept calls which target the user resource and build the url yourself, not forgetting to handle the response.
However, for such a thing, I would advise against using the admin-on-rest mechanisms as it seems users are not really a resource but an application concept. As such you might want to handle this in a custom page with fetch by yourself.

How do I get my button to redirect to a web page within the app?

So far, I have it so that when a user presses a button, a browser opens and redirects the user to my desired url. However, I want this to happen within the app instead of a web tab. How can I do this?
Use the BrowserComponent, just add it to the center of a border layout form and set the URL for that component. Check out the list of main components in Codename One within the developer guide.
Define a xml layout containing a widget called webview. Then in your activity you implement a listener to your button which invokes that xml with the desired page to load inside your webview. Google to find some code and return here with your code problems, if you find some. If this will be the case, open new questions provinding detailed info about your matters then we can help more. Best.
EDIT: Excuse me, just now, re-reading your question I think I really understand it, and the solution is very simple, just a line of code (to instruct your app to open a webpage inside your webview, and not the regular browser, outside your app). Try this:
wv = (WebView) findViewById(R.id.myWebView);
wv.setWebViewClient(new WebViewClient()); // needed to open url inside our webview, otherwise it will open at the default browser
wv.loadUrl(url);

Resources