Hierarchical menu with Contentful - contentful

Contentful has a notion of "Links" which can be to many objects or one. However I can't find a way to model the reverse relationship without doubling the work (i.e. specify the children AND parent of each object).
I would like to use Contentful to power a simple navigation like so:
Menu Item 1
Sub menu item 1
Sub menu item 2
Sub menu item 3
Menu Item 2
Sub menu item 4
Sub menu item 5
Sub menu item 6
-- Sub sub menu item 1
Where the links might look like /<parent.slug>/<child.slug>/<child.slug>/
I could find the page entry to render by traversing up the parent relationships to ensure I get a page with a slug, and a parent with a specific slug.
However, It's hard to render out child menu items without resorting to multiple API calls unless you include a "children" field in the object - which is prone to error and inconsistency.

Yes we had this same issue. We have a Page model, with a refLink called 'parentPage'. Our middleware makes 1 call to CF to get ALL pages and builds a site tree model in memory.
From this model we have methods to get children, and get URL slug.

If your items only has a child relationship you can leverage the includes concept. Simply fetch the furthest down child item and set the includes parameter to a high enough value (10 is max) and Contentfuls API will include all referenced content in a single API call.
You can read more about includes here: https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/links

Related

How to handle dependent drop-down in Geb

On the selection of one drop-down multiple drop-down generated automatically as per selected value of first drop down.
The value of first drop down is between 1 to 7.
If I select 4 in parent then 4 child drop-down generate.
How to handle this problem by using geb page object and utilize it in test spec.
Sample UI of mentioned problem
How are the child drop-downs generated? Is there some JavaScript involved or are the children already on the page and just not displayed?
For the first option, I suggest you execute the JS script via Geb how to deal with dynamic content.
You can pass parameters to the script (so you can pass what you select in the drop down).
In the page object that describes your page you can do something like:
parent{$("select", id: "parent")}
children {}
and add child dropdowns to children after. (I don't have enough details to give you a precise answer here.)
If the children are just not displayed until you select an option in the parent dropdown you can define them from the beginning in your page object. Even if you don't see them, they exist in the document your browser will interpret.

Element not recognized

Working on Coded UI testing and for scripts developed using Record Capture and playback feature (ctrl +I).
The problem is when the page has sub-menus (e.g. I need to hover over menu link then click sub-menu). When I record and capture element using Ctrl+I and executed a script it recognizes, but when I ran the script for the second time the element gets changed and it's not recognized.
I have tried simple x path utility posted here but coudn't able to use this feature. What would be the problem for always element id's getting changed. How to resolve it ?
Are you sure it isn't a nested object?
See http://executeautomation.com/blog/how-to-identify-all-the-child-elements-within-a-page-in-coded-ui-test-cuit/
You could also try EnsureClickable()
There could few reasons behind not recognizing an element:
List item Element is not visible when you are trying to click on it.
If Type of Parent Element is e.g. winclient then it’s difficult in coded UI to identify its child elements.
There could various solutions, you can try:
First Click on Menu Item and then click on Sub Menu Item, if you are directly clicking on sub menu item in your recorded script, this will make sub menu element visible.
Also you can check the visibility from Coded UI Test Builder-> Add Assertion button then going to UI Control Map, then select the element in tree and click on Refresh. It will show if element is visible or not.
If Ids are changing, then you can various other properties like Name, ClassName, InnerText, ControlType, TagInstance, ControlName etc. whichever is supported by Element.

Menu of structures

I'd like to have main menu in wiki part of Tiki Wiki. It should have following top-level items:
About
Atlas
Encyclopedia
Now the tricky part: I'd like to link each of above top-level menu items to corresponding structure so that hovering over Atlas opened sub-menu taken from Atlas structure.
I can make static menu like About/Atlas/Encyclopedia. I can make dynamic menu out of one structure so that top-level structure items become top-level menu items. Basically I need a menu out of structure but in such a way that it is structure's root that becomes top-level menu element. And then place three such structures horizontally.
Alternatively I could do it by nesting structures. Is it possible? And in such a way that it can be turned into nested menu?
I just stumbled over your question today and I hope my answer still can be a help for you.
Imho the right approach is to create a custom module and in the custom menu a "toplevel menu" with some simple html. The menu consists out of the three top items and for each one the appropriate structure menu as list element.
You want a horizontal menu, right?
The menu items "About", "Atlas", "Encyclopedia" representing your three wikistructures would be kind of drop down (or hover effect) horizontal css menu items level=0 (to) for example in a top-bar custom module.
You hover over one of the menu items and the associated wikistructure menu appears.
Regards,
Torsten
Well, I settled with "hybrid" solution. I have a structure like that:
Root
About
Intro
Setting
Encyclopedia
Organizations
Technology
Atlas
Inner system
Outer system
I created a "Root" page and made a Structure out of it.
Then I created first-level pages in that structure.
In next step I created those second-level pages - but as separate
pages, not part of "Root" structure.
Every such second-level entry was made a Structure and sub-pages were created in those secondary structures.
Then I added each second-level page (being a root of second-level structure) to main "Root" structure.
"Root" structure was then declared as main menu: in Manage > Modules > Assigned modules > Topbar I added "Menu" module and set structureId of "Root" structure.
So basically it's this alternative of nested structures I asked about. It does solve my problem of having tree-structure for menu that isn't overloaded by every minute page on wiki I'd like to have. On one hand it doesn't show all the entries but on the other hand it's good - the reader isn't overwhelmed and still can access deeper pages by second-level pages that have all the sub-structure listed.

How can we create sub modules in boilerplate.js

I have a design,
Where Im having lots of products and then each product has lots of sub products.
So Now in the First Screen I want to show a dashboard which will show all of my products.
On click of each product I want to open a separate view with its own left side navigation bar and detail view. These will be my main modules
now options in left side menubar will be my sub-products. Now click of any subproduct. I want to change my detail view. These will be my sub modules
Please share some sample example if you have with yourself
Thanks in advance.
BoilerplateJS supports having nested contexts. More information is available under 'Product Modules' section in boilerplatejs.org. A nested context can be created by passing the parent context in to the child context when creating it. You can create a context for each of your products. And within that context you can create modules, which will be your sub products. Having this type of a modular structure would help you in maintaining your code.
Implementing your requirement can be done in many ways.
One method is to structure the urls of your application as follows:
www.myapp.com/index.html#productA/submodule1
www.myapp.com/index.html#productB/submodule1
You can implement the menu as a seperate module, where it will change the menu that needs to be displayed according to the first portion (productA, productB) of your URL, and your sub modules can be activated/de-activated according to the rest of the URL portion. This method allows you to bookmark the pages and bring it to the same state when a bookmarked link is triggered.

Custom theming Drupal 6 Menus

Is there a hook or preprocess function that I can access to write my own theming function for a drupal menu (in this case, primary links)?
I have a rather complex menu structure that requires a little extra markup than I'm currently getting by just rendering the menu items in a block (involving sub-menus with a little custom markup) and really need to get access to build the menu's content variable myself, ideally from an array that has all the primary links and their children in scope.
While it may not be the best solution, it is one that worked quite quickly and painlessly:
Drupal keeps a cached version of all your menus in the cache_menu table, I ran a this query to retreive a serialized string containing all the contents of the menu:
SELECT data FROM menu_cache WHERE serialized = 1 AND cid LIKE 'links:primary_links:%';
Substitute primary_links for whatever the name of your menu is and call unserialize on $row->data to get a structured array of everything you should need to build a custom menu.
I call a function in hook_preprocess_block that swaps the content of the menu block with my own and everything seems to be working fine.

Resources