Hello everybody!
I have some requirements on my Frontend, and I try made UI on ReactJs Frontend. Another detail, I made it on https://reactjs.net/ for server rendering,
and now I can't imagine how can I use on JS side Umbraco API services or as minimum, how in JSX I can got Dictionary Items for multilanguage needs
in Razor View I can as ex. @Umbraco.GetDictionaryValue("SomeKey")
has the analogy on JSX ?
As solution, but very ugly, I can render al dictionary keys and values to window dictionary, and on client side use them, but is bad because increase traffic (page size);
another way, make any http handler with cache to get dictionary as some js file, that shall generated on fly from Umbraco data
I think best solution be use umbraco event, and when dictionary items changed, re-generate js file, with content initializer via JSON like:
module.exports = [ {key:.., value ...}, .. ]
and after that, I can include that JS file to my webpack chain to use and on server rendering side and client (browser) side
Umbraco API on Frontend
Hello everybody! I have some requirements on my Frontend, and I try made UI on ReactJs Frontend. Another detail, I made it on https://reactjs.net/ for server rendering, and now I can't imagine how can I use on JS side Umbraco API services or as minimum, how in JSX I can got Dictionary Items for multilanguage needs in Razor View I can as ex. @Umbraco.GetDictionaryValue("SomeKey") has the analogy on JSX ?
thank you
Hi Valentin
Try to use Surface Controllers + Partial view combination
return filled view with controllers to the page, in views use JSX instead of Razor
Thanks,
Alex
I'm not imagine how I can draw HTML on Razor into JSX can you explain more details?
Valentin
How are you handling requests to the website? Is it Umbraco page?
it is ASP.NET page than render something like @Html.React("ReactComponent", new { data = Model })
As solution, but very ugly, I can render al dictionary keys and values to window dictionary, and on client side use them, but is bad because increase traffic (page size); another way, make any http handler with cache to get dictionary as some js file, that shall generated on fly from Umbraco data
So you are using html views instead of Razor?
You can render html with SurfaceController, the issue is that you haven't access to UmbracoHelper inside html code, right?
right, I have jsx file (like js) with html embeded into it I can not use razor helpers
Can you avoid of using @Html.React("ReactComponent", new { data = Model }) helper?
You can use render Partial or render view razor helper and use Umbraco context inside this view
unfortunately no, because react & JSX inseparable
I think best solution be use umbraco event, and when dictionary items changed, re-generate js file, with content initializer via JSON like: module.exports = [ {key:.., value ...}, .. ] and after that, I can include that JS file to my webpack chain to use and on server rendering side and client (browser) side
Valentin, you can download all dictionary to csv with this package - https://www.diplo.co.uk/blog/web-development/diplo-dictionary-editor-for-umbraco/
Hi Valentin
Did you solve the issue? Can you share with the community?
Thanks,
Alex
Hi Valentin,
We solved this by passing in the dictionary items as well to the react component.
Then you get something like this :
And then in your react component you can access all the values throught the labels prop.
Dave
I made Observer singleton class that subscribe to appropriate events and auto generate JSON object
usage example
this is more universal approach
is working on a reply...