I have defined my dialog view as follows. For some reason it gives blank dialog box. If I uncomment the already commented control and comment the entire , then it works fine. I do not understand what is possible problem with the . Same code works for another dialog with the
View.xml
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id="editCompanyDialog" contentWidth="800px" contentHeight="100%" afterClose="onCancelEditCompanyDialog"
busy="{sharedApp>/oBusy/busy}" busyIndicatorDelay="{sharedApp/oBusy/delay}">
<!--<Toolbar class="modal-header">-->
<!-- <Text text="Edit Company Information" class="modal-title"/>-->
<!-- <core:Icon class="modal-logo" src="sap-icon://edit-icon"/>-->
<!-- <Button text="x" class="btn-link modal-close-button" press="onCancelEditCompanyDialog"/>-->
<!--</Toolbar>-->
<subHeader>
<Toolbar>
<Text class="sapUiSmallMarginBegin dialogTitle" text="{/headerText}"/>
<ToolbarSpacer></ToolbarSpacer>
<Button class="btn-link-grey" custdata:name="maDialog" icon="sap-icon://decline" tooltip="{i18n>GB_Close}" press="onCloseDialog"/>
</Toolbar>
</subHeader>
<Panel>
<content>
<l:BlockLayout id="editCompanyBlockLayout">
<l:BlockLayoutRow>
<l:BlockLayoutCell>
<VBox>
<ObjectIdentifier text="Edit your company information"/>
</VBox>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
<l:BlockLayoutRow>
<l:BlockLayoutCell>
<VBox>
<Label text="{i18n>CC_Company}" labelFor="Name1"/>
<Input id="Name1" textAlign="Left" value="{EditCompany>/Input/Name1}" fieldGroupIds="FC"/>
</VBox>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
</content>
</Panel>
In your button, you're using the custom data namespace, but haven't declared it.
Add
xmlns:custdata="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
to the top of your view in the core:FragmentDefinition tag
Related
I wanted a small separator to appear between buttons in custom ribbon tab. But the <separator id="MySeparatorE1" /> always draws large vertical separator.
How can we get small separator as circled in picture to appear between the buttons ?
I want a small seperator between Sample1 and Sample2 of figure (In figure both are written sample though) !
</group>
<group id="customgroupF" label="EDIT SECTION">
<dropDown id="dropDownF1" label="Hello:" sizeString="B_300*300" getItemCount="GetItemCount1" getItemLabel="GetItemLabel1" onAction="onaction1" getSelectedItemIndex="ItemSelectedIndex1" />
<dropDown id="dropDownF2" label="Hi:" sizeString="C_300*300" getItemCount="GetItemCount2" getItemLabel="GetItemLabel2" onAction="onaction2" getSelectedItemIndex="ItemSelectedIndex2" />
<box id="box1" boxStyle="horizontal">
<button id="custombuttonF3" label="Sample1" screentip="Increase" onAction="Macro4" imageMso="UpArrow2" />
<button id="custombuttonF4" label="Sample2" screentip="Decrease" onAction="Macro4" imageMso="DownArrow2" />
</box>
<box id="box2" boxStyle="vertical">
<button id="custombuttonF1" label="Run1" showLabel="false" screentip="Edit1" onAction="Macro4" imageMso="MacroPlay" />
<button id="custombuttonF2" label="Run2" showLabel="false" screentip="Edit2" onAction="Macro4" imageMso="MacroPlay" />
</box>
</group>
By default, the Ribbon engine determines the positions of controls that you add to a group. If you want to define the layout of the controls with more precision, you can group the controls within one or more boxes. When you create a box, you specify its orientation (horizontal or vertical). A group can contain multiple boxes, and you can include vertical dividers between the boxes. The vertical dividers are created by using the separator control, which is used only for vertical boxes. For example:
<group id="CustomGroup2" label="Vertical Boxes"
insertBeforeMso="GroupClipboard">
<box id="box3" boxStyle="vertical">
<button id="buttonB1" label="Button1"/>
<button id="buttonB2" label="Button2"/>
</box>
<separator id="separator2"/>
<box id="box4" boxStyle="vertical">
<button id="buttonBA" label="ButtonA"/>
<button id="buttonBB" label="ButtonB"/>
<button id="buttonBC" label="ButtonC"/>
</box>
</group>
I have the following portion of html code in a web page
<div class="action">
<div class="double-button">
<button class="widget-button" title="2 people liked this post">2</button>
<button class="widget-button like" title="like this post">
<svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
<use xlink:href="#far-heart"></use>
</svg>
</button>
</div>
</div>
After hovering over the first button the class name change and the code transform to
<div class="action">
<div class="double-button">
<button class="widget-button d-hover" title="2 people liked this post">2</button>
<button class="widget-button like" title="like this post">
<svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
<use xlink:href="#far-heart"></use>
</svg>
</button>
</div>
</div>
After clicking over the first button a new div appear that contains people who like the post
<div class="action">
<div class="double-button">
<button class="widget-button d-hover" title="2 people liked this post">2</button>
<button class="widget-button like" title="like this post">
<svg class="fa d-icon d-icon-d-unliked svg-icon svg-node" aria-hidden="true">
<use xlink:href="#far-heart"></use>
</svg>
</button>
</div>
<div class="likes">
<a class="trigger-user" href="/USER1" name="USER1">USER1</a>
<a class="trigger-user" href="/USER2" name="USER2">USER2</a>
</div>
</div>
My objective is to select all those users using selenium and python3 so I tried the following code inspired from other stack overflow questions like link1 and link2
driver = webdriver.Chrome(executable_path='./chromedriver_83') #this works fine
driver.get("link_to_the_page") #also I get the link and all contents without problems
likes_button=driver.find_elements_by_xpath("//button[#class='widget-button']") # works fine too
print(likes_button[0].text) # This gives '2', it the right value
hover = ActionChains(driver).move_to_element(likes_button[0]) #select only the first element in the page for testing
hover.perform() # I think the hover does not work even if this is the right way
likes_button_hover=driver.find_elements_by_xpath("//button[#class='widget-button d-hover']") # now select the hovered button to be clicked, since I hovered only one button in the whole page the result shoud be one
print(len(likes_button_hover)) # this gives 0 while it should give 1
likes_button_hover[0].click() # this throw an error
I get the following error which means the button did not change the class ( the hover did not work)
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <button class="widget-button" title="2 people liked this post">2</button> is not clickable at point (537, 17). Other element would receive the click: <span>...</span>
(Session info: chrome=83.0.4103.116)
I tried to get into the first button in many means using for example
driver.find_elements_by_css_selector("[title*='people liked this post']")
but in vain, I think the problem occurs in the hover but I can not see why, and of course I can not get the button and click it without hovering it first.
What Am I doing wrong?
I can see two solution here.
1: As button (One you need to click to see all users) is always there but only class is changing. So you can do a direct click without hovering on it.
likes_button=driver.find_elements_by_xpath("//button[contains(#title,'people liked this post')]") # Used contains as number of people liked might change
print(likes_button[0].text) # This gives '2', it the right value
likes_button[0].click() # If not working try javaScript : driver.execute_script("arguments[0].click();", likes_button[0])
2: If you really want to click only after hovering, i guess you might need to to pause method of Actionchain class. As java script might take some time to load. In your case it is trying to find button with class widget-button d-hover immediately after hovering the mouse.
likes_button=driver.find_elements_by_xpath("//button[#class='widget-button']")
print(likes_button[0].text)
ActionChains(driver).move_to_element(likes_button[0]).pause(1).perform()
likes_button_hover=driver.find_elements_by_xpath("//button[#class='widget-button d-hover']")
print(len(likes_button_hover))
likes_button_hover[0].click()
I made a custom ribbon addin following this article,
https://www.thespreadsheetguru.com/blog/step-by-step-instructions-create-first-excel-ribbon-vba-addin
It works perfectly but can I move the tab which I have made to be the second tab after the Start tab?
You can do what you wish to do but to do so will mean that you need to edit the CustomUI.Xml file which is located in the zip file that is an Office document.
If you are working in VBA then you will best be served by the CustomUI editor tool
https://github.com/OfficeDev/office-custom-ui-editor
This tool will extract the xml file from an Office document, allow you to edit and then save it back to the office document.
This is a good link to start reading up on Ribbon Xml.
https://www.rondebruin.nl/win/s2/win001.htm
The Xml below is from one of my CustomUI for Word. I think it does the same as you are asking in that I inserts the new tab to the left of the Past group on the Home Tab of the ribbon. It also replaces the Paragraph tab with a customised version.
<tab
idMso="TabHome">
<group
id = "Home.RegulatoryCMC"
label = "Regulatory CMC"
insertBeforeMso = "GroupClipboard"
visible="true">
<button
id = "Home.RegulatoryCMC.StartHere"
label = "Start Here"
onAction = "RibbonCallbacksForButtons.OnAction"
getSupertip = "RibbonCallbacksForSupertips.getSuperTip"/>
<button
id="Home.RegulatoryCMC.ShowStylePane"
label="Show Style Pane"
onAction="RibbonCallbacksForButtons.onAction"
getSupertip = "RibbonCallbacksForSupertips.getSuperTip"/>
<button
id="Home.RegulatoryCMC.ResetXML"
label="Reset XML"
onAction="RibbonCallbacksForButtons.onAction"
getSupertip = "RibbonCallbacksForSupertips.getSuperTip"/>
</group>
<group
idMso="GroupParagraph"
getVisible="RibbonCallbacksForVisibility.getVisible"/>
<box
id="Home.Paragraph.Status"
boxStyle="horizontal">
<buttonGroup
id="Home.Paragraph.Alignment">
<toggleButton idMso="AlignLeft"/>
<toggleButton idMso="AlignCenter"/>
<toggleButton idMso="AlignRight"/>
<toggleButton idMso="AlignJustify"/>
</buttonGroup>
<buttonGroup
id="Home.Paragraph.Marks"
visible="true">
<toggleButton idMso="ParagraphMarks"/>
</buttonGroup>
</box>
<box
id="ParagraphIndent"
boxStyle="horizontal">
<button idMso="IndentDecreaseWord"/>
<button idMso="IndentIncreaseWord"/>
</box>
<box
id = "ParagraphOther"
boxStyle="horizontal">
<gallery idMso="LineSpacingGallery"/>
<button idMso="SortDialogClassic"/>
</box>
<dialogBoxLauncher>
<button idMso="ParagraphDialog"/>
</dialogBoxLauncher>
</group>
</tab>
Say we have a component A which has a component B in it and wants to display a text next to it as well:
<div wicket:id="componentA" id="A" class=parent">
<div wicket:id="componentB" id="B" class="child"></div>
Text
</div>
What I'm trying to achieve is to display a "Text" inside a componentA having simple WebMarkupContainer in it too.
I have tried to get around this by the following construct:
<div id="A" class=parent">
<div wicket:id="componentB" id="B" class="child"></div>
<wicket:container wicket:id="text" />
</div>
You see that I do not need the outer div to be a wicket component.
But then it fools out the parent / child class structue so that the text is displayed in the incorrect location (for instance below the child div instead of next to it). How to handle such situations in Wicket?
Thanks!
I got a ZUL Page, which is aligned by a "borderlayout". In "north" I got a Menubar, which is aligned left.
Now I want 2x Buttons and 2x Labels in "north", on the opposite direction of the Menubar (right).
I tried:
<north border="none">
<hbox width="100%">
<menubar id="menubar" width="380px">
<menu label="A">
<menupopup>
<menuitem label="A1"/>
</menupopup>
</menu>
....
</menubar>
<hbox vflex="1" hflex="1" align="center">
<div hflex="1"></div>
<label id="B"/>
<button id="C" label="C" />
<button id="D" label="D" />
<label id="E"/>
</hbox>
</hbox>
</north>
which looks fine, but when I set a value for label "b" or "e", the design gets broken.
h**p://i.imgur.com/HnRnxmj.png
The top part in the image is the right looking one, while the bottom one is screwed up. Any Idea how to fix this? The buttons are "fixed width" while both labels can "grow".
Thanks
Your spacer <div> is eating up all the space. Remove this and then set pack of the <hbox> to end.
This gives you something like that:
...
</menubar>
<hbox vflex="1" hflex="1" align="center" pack="end">
<label id="B"/>
...
As a general note I find it quite helpful to use Firefox/Firebug for debugging those layout issues. So one can easily see which resulting DOM is generated by the ZUL code.