I am trying to emulate the Lookup column link style in another column using column formatting.
The Lookup column links have a specific color and position within the column cell.
As shown below, I want the links in My Column to look like those in Lookup Column.
Using browser developer tools, I can see that there are differences in the HTML of each column:
Lookup column link HTML:
<div role="gridcell" aria-readonly="true" aria-colindex="7" class="ms-DetailsRow-cell cell-223 cellUnpadded-111" data-automationid="DetailsRowCell" data-automation-key="LookupColumn" style="width: 190px;">
<div>
<button type="button" class="ms-Link od-FieldRender od-FieldRender-lookup root-211" aria-label="My Lookup Value Here" role="link" tabindex="-1">
My Lookup Value Here
</button>
</div>
</div>
My Column link HTML:
<div role="gridcell" aria-readonly="true" aria-colindex="8" class="ms-DetailsRow-cell cell-113 cellUnpadded-111" data-automationid="DetailsRowCell" data-automation-key="MyColumn" style="width: 299px;">
<div class="customField_ab5ae447">
<div class="sp-field-customFormatter">
<a style="margin-left:30px;" target="_blank" href="https://some-link-here.com" rel="noopener noreferrer " data-interception="off" tabindex="-1">
click here to view something
</a>
</div>
</div>
</div>
This is the JSON I have used to create a link in My Column:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"style": {
"margin-left": "30px"
},
"elmType": "a",
"txtContent": "click here to view something",
"attributes": {
"target": "_blank",
"href": "https://some-link-here.com"
}
}
]
}
How can I modify the JSON so that the link has the same style as the Lookup column link?
Edit:
There is a similar question here, but the answers do not produce the same styling as the Lookup link column.
through the screenshot I notice the lookup column is also using column formatting. You could edit lookup column using column formatting to see what JSON code are using in it. Then compare which style it is using, such as font, color and so on.
Or, you could provide the JSON code in Lookup Column for further research.
Related
I have a HTML like this :
<ol class="list">
<li class="list-item " id="37647629">
<!---->
<div>
<!---->
<div>
<!---->
<book class="book">
<div class="title">
someText
</div>
<div class="year">
2022
</div>
</book>
</div>
<!---->
</div>
<!---->
</li>
<li class="list-item " id="37647778">
<!---->
<div>
<!---->
<div>
<!---->
<book class="book">
<div class="title">
someOtherText
</div>
<div class="year">
2014
</div>
</book>
</div>
</div>
<!---->
</li>
</ol>
I want to get the first book title and year, directly with two xPath expression.
I tried :
$x('//book') => Ok, get the two books list
$x('//book[0]') => Empty list
$x('//book[0]/div[#class="title"]') => Nothing
Seems I have to do this :
$x('//book')[0]
and then process title, but why I can't do this just with Xpath and directly access the first title with a Xpath expression ?
This will give you the first book title
"(//book)[1]//div[#class='title']"
And this gives the first book year
"(//book)[1]//div[#class='year']"
You're missing that XPath indexing starts at 1; JavaScript indexing starts at 0.
$x('//book') selects all book elements in the document.
$x('//book[0]') selects nothing because XPath indexing starts at 1. (It also signifies to select all book elements that are the first among siblings — not necessarily the same as the first of all book elements in the document.)
$x('//book')[0] would select the first book element because JavaScript indexing starts at 0.
$x('(//book)[1]') would select the first book element because XPath indexing starts at 1.
To select the first div with class of 'title', all in XPath:
$x('(//div[#class="title"])[1]')
or, using JavaScript to index:
$x('(//div[#class="title"])')[0]
To return just the string value without the leading/trailing whitespace, wrap in normalize-space():
$x('normalize-space((//div[#class="title"])[1])')
Note that normalize-space() will also consolidate internal whitespace, but that is of no consequence with this example.
See also
How to select first element via XPath? (And be sure not to miss the explanation of the difference between //book[1] and (//book)[1] — they are not the same.)
I am trying to get "text that I want" from the site with this structure of code:
<td class="x">
<h3 class="x"> number </h3>
<p>
text that I want;
</p>
</td>
If there will be one td with class "x" then I will do this:
$('td.x > p > a').text()
and get text that I want, but the problem is that on this site there are a lot of "td" and "h3" elements with the same class "x". The only difference is that each time the text that is in "h3" element is a different number and I know what number is in "h3" element on the place where is my link. For example:
<td class="x">
<h3 class="x"> **125** </h3>
<p>
text that I want;
</p>
</td>
The question is - is it possible to choose selector based on the text that is inside - in my example I know that in code there is h3 element with text "125" or maybe is better way to get text from "a" element in my case.
Contains is the selector you're looking for
$('h3:contains("**125**")')
This will select h3 that has the text you wanted
I am trying to select a value from a dropdown in a web page using Seleinum with VBA binding, but I am unable to do it.
This is the code I tried bot.FindElementById("holder-samples-date-type-inputEl").SendKeys "XX"
I am not getting any error the code runs it click the dropdown button and the list is shown but no value is selected and the dropdown does not change.
I have the same project with VBA and IE (DOM elements) and this code works fine in Internet explorer IE.document.getElementById("holder-samples-date-type-inputEl").Value = "XX"
The interesting part of this dropdown is after clicking the dropdown icon i am unable to inspect the list (like do a right click on the list) and if i click anywhere else in the web page or change the window the dropdown list get closed (like it retracts) note: this is not a mouseover drop down. Also, when the list is open there seems to be additional code added (I have pasted a snippet of the code)
Below is the HTML from the web page.
<div id="holder-samples-date-type-triggerWrap" data-ref="triggerWrap" class="x-form-trigger-wrap x-form-trigger-wrap-default x-form-trigger-wrap-invalid">
<div id="holder-samples-date-type-inputWrap" data-ref="inputWrap" class="x-form-text-wrap x-form-text-wrap-default x-form-text-wrap-invalid"><input id="holder-samples-date-type-inputEl" data-ref="inputEl" type="text" role="combobox" aria-label="Chargebacks: Date Type" aria-readonly="false" aria-required="true" aria-haspopup="true" aria-expanded="false" aria-autocomplete="list" size="1" name="P_samples_Date_Type" readonly="readonly" class="x-form-field x-form-required-field x-form-text x-form-text-default x-form-invalid-field x-form-invalid-field-default" autocomplete="off" aria-labelledby="holder-samples-date-type-labelEl" aria-owns="boundlist-1206" componentid="holder-samples-date-type" data-errorqtip="<ul class="x-list-plain"><div>Date Type</div><li>This field is required</li></ul>" aria-invalid="true"></div>
<div id="holder-samples-date-type-trigger-picker"
aria-label="Trigger" class="x-form-trigger x-form-trigger-default x-form-arrow-trigger x-form-arrow-trigger-default "><img class="combo-trigger-placeholder" src="https://www.sample.net/clr/images/16x16_transparent.png" title="combobox trigger" alt="combobox trigger"></div>
</div>
Below is the image
Since I am unable to do a right click on the dropdown option. I did a 'Find" option in the developer window and below is the webpage code for the dropdown item and it is inside a iframe
<div id="boundlist-1206-listWrap" data-ref="listWrap" role="presentation" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: auto;">
<ul id="boundlist-1206-listEl" data-ref="listEl" class="x-list-plain">
<div data-qtip="" class="x-boundlist-item x-boundlist-item-over" tabindex="-1" data-recordindex="0" data-recordid="31" data-boundview="boundlist-1206" id="ext-932" role="option" aria-selected="false">Received Date</div>
<div data-qtip="" class="x-boundlist-item" tabindex="-1" data-recordindex="1" data-recordid="32" data-boundview="boundlist-1206" id="ext-933" role="option" aria-selected="false">Status Date</div>
<div data-qtip="" class="x-boundlist-item" tabindex="-1" data-recordindex="2" data-recordid="33" data-boundview="boundlist-1206" id="ext-934" role="option" aria-selected="false">Due Date</div>
<div data-qtip="" class="x-boundlist-item" tabindex="-1" data-recordindex="3" data-recordid="34" data-boundview="boundlist-1206" id="ext-935" role="option" aria-selected="false">Disposition Date</div>
</ul>
</div>
Some points that may help:
1) If inside an iframe you will need to switch to the iframe first
bot.SwitchToFrame(identifier)
Identifier can be the element selected by iframe name/id etc.
2) You can try click and hold on the input text box before using your SendKeys
bot.FindElementById("x").ClickAndHold
'sendkeys line here
3) You can try setting the value with javascript
bot.ExecuteScript "document.getElementById('x').value = 'xx';"
I have written a python selenium script that selects a state value from a drop down. The HTML for the drop down element is copied below:
<div class="hQSHyh4QFG0Xh0d-6pxTF" tabindex="0" style="height: 238px; display: none;">
<div class="SD_7vnwWhO0KG80czzPb3 option-0 al-option">AL</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-1 ak-option">AK</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-2 as-option">AS</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-3 az-option">AZ</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-4 ar-option">AR</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-5 ca-option">CA</div>
<div class="SD_7vnwWhO0KG80czzPb3 option-59 um-option">UM</div>
</div>
Problem: the automation script locates the same state value ("CA") using a hard-coded xpath statement (See code snippet from script below). Instead, I would like to select the state value using a stored variable called "state".
state_selection = self.driver.find_element_by_xpath("/html/body/div[2]/div/div[2]/div/div/div[2]/div[1]/form/div/div[2]/div[2]/div[3]/div[2]/div/div[3]/div[6]")
state_selection.click()
Additional Notes: I have tried using other methods to locate the state value (see below) but, so far, I have only been successful using the hard-coded xpath above.
I also tried to locate the drop down element using the Selenium Select Method but I got messages telling me that "Select only works on <select> elements, not on 'div' "
driver.findElement(by.xpath("//select[#SD_7vnwWhO0KG80czzPb3='']/option[#value='CA']")).click()
Try to select required option by its text content:
state = "CA"
state_selection = self.driver.find_element_by_xpath("//div[.='%s']" % state)
state_selection.click()
I want to find and click the Line Lo value from the following value. The following li had more than 100 records has same class name. How to find the Line Lo and click that value.
<div id="loc">
<ul id="tab">
<li class="criteria">
<div class="bud">
<div class="inner">
<div class="attr">Code Lo</div>
</div>
</div>
</li>
<li class="criteria">
<div class="bud">
<div class="inner">
<div class="attr">Line Lo</div>
</div>
</div>
</li>
<li class="criteria">
<div class="bud">
<div class="inner">
<div class="attr">Add Lo</div>
</div>
</div>
</li>
</ul>
</div>
When I tried, browser.ul(id: "tab").li(class: "criteria").div(text: "Line Lo")
Got the failure error.
Unable to locate element, using(:class => "Criteria", :tag_name=>"li"
I tried different, different attributes to find the Text Line Lo and I failed.
Also, This element is like 45th, so is it possible to scroll down and flash this value before click?
Thanks in advance
The original thing you tried
browser.ul(id: "tab").li(class: "criteria").div(text: "Line Lo")
failed because when there is more than one element that could match the criteria you specify, watir will use the first one it finds. So what that is asking watir to do would equate to the following in english
Find the first un-ordered list with the id 'tab',
then inside that list find the first list item with the class 'criteria',
then inside that list item, find a div with the text 'Line Lo'.
Since the first LI inside that list does not contain a div with that text, it fails.
To click the innermost div (based on comments, this is what you are trying to do)
browser.div(:class => "attr", :text => "Line Lo").click
aka Find me a div with the class "attr" AND the text "Line Lo", and then have the div click itself
these other options were presented when it was not clear exactly which div the OP was after, but I'm leaving them as they might be informative to other folks struggling with similar issues
To click the div that contains the one above (the parent).
browser.div(:class => "inner", :text => "Line Lo").click
if that parent div had no uniqueness (no class etc) you could still get to it like this
browser.div(:class => "attr", :text => "Line Lo").parent.click
To click the li tag that holds all that stuff
browser.li(:class => "criteria", :text => "Line Lo").click
For any of those, if you need to restrict to just looking inside that particular list, then specify like this
browser.ul(:id => "tab").li(:class => "criteria", :text => "Line Lo").click
You could try:
browser.ul(:id => 'tab').div(:class => 'attr', :text => 'Line Lo').click
When .click is used, it should get scrolled into view before being clicked.