how to debug form rendering issues when using angular-schema-form - angular-schema-form

i am using angular-schema-form to render some forms dynamically. the forms are rendering mostly as expected, but when i use tabs, only the tab names are getting rendered, but not the content of the tabs. i have tested the json schema and the form on the schemaform.io test page (http://schemaform.io/examples/bootstrap-example.html) where it renders correctly, but the same doesn't render the tab content in my application.
Note 1: it is worthwhile to note that i am using angular-schema-form within a larger application that is based on spring-boot + angularjs (the application itself is generated using JHipster (https://jhipster.github.io)
any pointers on where i need to start looking for debugging this issue? i looked at the google chrome developer tools but did not find anything useful to help debug.
Note 2: i am not using any custom decorators or validators. both the schema and form are generated from a YAML template which is more 'user friendly'

Related

Google Form Editor in iFrame?

I am currently working on a project that exposes Google Docs and Forms to a React frontend using Oauth and iFrames. I am able to embed doc, sheet and slide editors with no issues, but no luck with Google forms (I assume it may not permit editing when embeded), so I have come here to ask if anyone has had any luck doing this.
Whilst it is trivial to embed a Google form itself, I am not able to find a way to access the Google form editor within an iframe as it simply throws a 403. For docs I create an iframe for a given document and suffix the following query params: ?embedded=true&authuser=<EMAIL_ADDRESS>&oauth_token=<OAUTH2_TOKEN>. however this does not work for forms.
Is anyone aware of any work around to access the form editor via iframe? otherwise I will have to create a frontend wrapper for the forms API which is not ideal.

<div id=root></div> shows blank source code in React?

I am creating a mern stack application and ı have problems as shown in the pictures
Here is what shows when ı press ctrl + U in chrome
Here is what shows in dev tools
My app is still in development mode and is this affects seo ? and how can ı render in source code what shows in dev tools ?
Thanks
it's happening because the jsx we write are actually closer to js than html,
after we ship the code the we send the js and only the root div.
as the js executes in browser the div gets populated.
now it has effects on SEO,
you won't get any preview of your website if you share it on any social media if you go with raw react.
if it's a blog, or some documentation page I would suggest you look up static generation or server-side rendering and go with nextjs or gatsbyjs.
That happens because a ReactJS is rendered using JS. It means that the DOM will be updated using JS. When you open it with ctrl + U you're looking only to the HTML document, without any changes made by the JS engine.
I don't think leaving it like this will affect SEO, but you you can use server-side rendering to achieve what you want.

Appium is unable to identify any element on particular page of My Mobile native app

appium logs 2nd part
appium logs first part
UI Automator showing element properties
UI Automator showing all element properties
Summary:
Appium is unable to identify any element on particular page of My Mobile native app. I have used all the possible locators for different elements shown on that page with help of UI Automate Viewer.
Used different locators (by id/xpath/contains/accessibility/UIAutomate).
Verified that the page belongs to native app only with no Web View.
applied different types of sufficient wait for the page.
driver.get.pagesource not working for the page.
Can any one please help in same, the below ways I have opted for finding the solutions but nothing has worked till now.
You say a native apps, but seen from the picture, that you facing with like a Maps application (this is web apps, my assumse), often in testing things like this happen, like you have to do a switch context. When you are on this page please try this :
driver.context("WEBVIEW_1");
And this is for switch again to native :
driver.context("NATIVE_APP");
Please read this reference and this.

React HTML point and click generator

I want users to be able to design a simple web page to render their content on a page on my site. Are there any projects (ideally react) out there currently that allow a point and click layout design similar to wordpress and generate html?
I have since found the Ory Editor - Seems to fulfil all my requirements.
https://github.com/ory/editor

Referencing Another App

What is the best way to reference another app in the visual query designer?
I am using the blog app and I created a second app to list the tags that are used in the main blog app. This way when the app goes to a detail page of a post, I can still have the tags listed on the website without the view changing automatically. I set up my blog tags app with a visual query that list all of the tags used in the main app. Everything was working fine in development.
The problem that I have run into is that when I move the app to a production site the AppId was different than the one I was currently using and development. Now, the tags app is showing an error and I am not able to get into the settings to change the app ID of the visual query to the proper one in order to get the information needed. Is there a better way that I should be handling this?
This sounds like the right way to do it - your main issues is getting into the admin-ui when the template you have shows an error.
I suggest that you quickly rename your current template (so it's not used till you fix the bug) and create an empty template with the original name. This way you can go to the normal settings.
Another option is to switch into dnn-edit-mode, and use the black-dnn buttons to get to app-admin.

Resources